feat(Slider): create reusable slider component - a styled version of bits-ui slider

src/shared/ui/Slider/Slider.stories.svelte

@@ -0,0 +1,51 @@
+<script module>
+import { defineMeta } from '@storybook/addon-svelte-csf';
+import Slider from './Slider.svelte';
+
+const { Story } = defineMeta({
+    title: 'Shared/Slider',
+    component: Slider,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'Styled bits-ui slider component for selecting a value within a range.',
+            },
+            story: { inline: false }, // Render stories in iframe for state isolation
+        },
+    },
+    argTypes: {
+        value: {
+            control: 'number',
+            description: 'Current value (two-way bindable)',
+        },
+        min: {
+            control: 'number',
+            description: 'Minimum value',
+        },
+        max: {
+            control: 'number',
+            description: 'Maximum value',
+        },
+        step: {
+            control: 'number',
+            description: 'Step size for value increments',
+        },
+    },
+});
+</script>
+
+<script lang="ts">
+let minValue = 0;
+let maxValue = 100;
+let stepValue = 1;
+let value = $state(50);
+</script>
+
+<Story name="Horizontal" args={{ orientation: 'horizontal', min: minValue, max: maxValue, step: stepValue, value }}>
+    <Slider bind:value min={minValue} max={maxValue} step={stepValue} />
+</Story>
+
+<Story name="Vertical" args={{ orientation: 'vertical', min: minValue, max: maxValue, step: stepValue, value }}>
+    <Slider bind:value min={minValue} max={maxValue} step={stepValue} orientation="vertical" />
+</Story>