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

<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',
        },
        label: {
            control: 'text',
            description: 'Optional label displayed inline on the track',
        },
    },
});
</script>

<script lang="ts">
let value = $state(50);
</script>

<Story name="Horizontal" args={{ orientation: 'horizontal', min: 0, max: 100, step: 1, value }}>
    <Slider bind:value />
</Story>

<Story name="Vertical" args={{ orientation: 'vertical', min: 0, max: 100, step: 1, value }}>
    <Slider bind:value />
</Story>

<Story name="With Label" args={{ orientation: 'horizontal', min: 0, max: 100, step: 1, value, label: 'SIZE' }}>
    <Slider bind:value />
</Story>