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/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],