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: {