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

blocksuite/affine/foundation/src/effects.ts

@@ -20,6 +20,7 @@ import { effects as componentOpenDocDropdownMenuEffects } from '@blocksuite/affi
 import { effects as componentPortalEffects } from '@blocksuite/affine-components/portal';
 import { effects as componentResourceEffects } from '@blocksuite/affine-components/resource';
 import { effects as componentSizeDropdownMenuEffects } from '@blocksuite/affine-components/size-dropdown-menu';
+import { effects as componentSliderEffects } from '@blocksuite/affine-components/slider';
 import { SmoothCorner } from '@blocksuite/affine-components/smooth-corner';
 import { effects as componentToggleButtonEffects } from '@blocksuite/affine-components/toggle-button';
 import { ToggleSwitch } from '@blocksuite/affine-components/toggle-switch';
@@ -53,6 +54,7 @@ export function effects() {
   componentViewDropdownMenuEffects();
   componentTooltipContentWithShortcutEffects();
   componentSizeDropdownMenuEffects();
+  componentSliderEffects();
   componentEdgelessLineWidthEffects();
   componentEdgelessLineStylesEffects();
   componentEdgelessShapeColorPickerEffects();