refactor(editor): extract slider component (#12210)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Introduced a new slider component for line width selection, providing a more interactive and streamlined UI.
  - Added support for using the slider component across relevant panels.
- **Improvements**
  - Simplified the line width selection panel for easier use and improved maintainability.
  - Enhanced event handling to prevent dropdowns from closing when interacting with the panel.
- **Bug Fixes**
  - Improved event propagation control within the line styles panel.
- **Chores**
  - Updated package exports to include the new slider component.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

tests/affine-local/e2e/blocksuite/edgeless/highlighter.spec.ts

@@ -37,7 +37,8 @@ test('should add highlighter', async ({ page }) => {
   await expect(toolbar).toBeVisible();
 
   const lineWidthButton = toolbar
-    .locator('.line-width-button[data-selected]')
+    .locator('affine-slider')
+    .locator('.point-button[data-selected]')
     .last();
   const defaultLineWidth = await lineWidthButton.getAttribute('aria-label');
 

tests/affine-local/e2e/blocksuite/edgeless/note.spec.ts

@@ -330,7 +330,7 @@ test.describe('edgeless note element toolbar', () => {
     await toolbar.getByRole('button', { name: 'Border style' }).click();
     await toolbar.locator('.mode-solid').click();
     await toolbar.getByRole('button', { name: 'Border style' }).click();
-    await toolbar.locator('edgeless-line-width-panel').getByLabel('8').click();
+    await toolbar.locator('affine-slider').getByLabel('8').click();
 
     expect(await getNoteEdgelessProps(page, noteId)).toEqual({
       style: {

tests/blocksuite/e2e/edgeless/connector/connector.spec.ts

@@ -157,10 +157,6 @@ test('change connector line width', async ({ page }) => {
   await triggerComponentToolbarAction(page, 'changeConnectorStrokeStyles');
   await changeConnectorStrokeWidth(page, 5);
 
-  await waitNextFrame(page);
-
-  await triggerComponentToolbarAction(page, 'changeConnectorStrokeStyles');
-
   const pickedColor = await pickColorAtPoints(page, [
     [start.x + 5, start.y],
     [start.x + 10, start.y],

tests/blocksuite/e2e/utils/actions/edgeless.ts

@@ -670,7 +670,7 @@ export async function selectBrushSize(page: Page, size: string) {
     twelve: 6,
   };
   const sizeButton = page.locator(
-    `edgeless-pen-menu .line-width-panel .line-width-button:nth-child(${sizeIndexMap[size]})`
+    `edgeless-pen-menu edgeless-line-width-panel .point-button:nth-child(${sizeIndexMap[size]})`
   );
   await sizeButton.click();
 }
@@ -794,7 +794,7 @@ export async function updateExistedBrushElementSize(
 ) {
   // get the nth brush size button
   const btn = page.locator(
-    `.line-width-panel > div:nth-child(${nthSizeButton})`
+    `edgeless-line-width-panel .point-button:nth-child(${nthSizeButton})`
   );
 
   await btn.click();
@@ -1192,9 +1192,7 @@ export async function triggerComponentToolbarAction(
       break;
     }
     case 'changeConnectorStrokeStyles': {
-      const button = locatorComponentToolbar(page).getByRole('button', {
-        name: 'Stroke style',
-      });
+      const button = locatorComponentToolbar(page).getByLabel('Stroke style');
       await button.click();
       break;
     }
@@ -1438,8 +1436,7 @@ export async function resizeConnectorByStartCapitalHandler(
 export function getEdgelessLineWidthPanel(page: Page) {
   return page
     .locator('affine-toolbar-widget editor-toolbar')
-    .locator('edgeless-line-width-panel')
-    .locator('.line-width-panel');
+    .locator('edgeless-line-width-panel');
 }
 export async function changeShapeStrokeWidth(page: Page) {
   const lineWidthPanel = getEdgelessLineWidthPanel(page);
@@ -1501,7 +1498,7 @@ export function locatorConnectorStrokeWidthButton(
 ) {
   return locatorComponentToolbar(page)
     .locator('edgeless-line-width-panel')
-    .locator(`.line-width-button:nth-child(${buttonPosition})`);
+    .locator(`.point-button:nth-child(${buttonPosition})`);
 }
 export async function changeConnectorStrokeWidth(
   page: Page,