veza/apps/web/src/components/ui/Slider.stories.tsx

import type { Meta, StoryObj } from '@storybook/react';
import { Slider } from './slider';

const meta = {
    title: 'UI/Slider',
    component: Slider,
    tags: ['autodocs'],
    argTypes: {
        value: { control: { type: 'range', min: 0, max: 100 } },
        min: { control: 'number' },
        max: { control: 'number' },
        step: { control: 'number' },
        disabled: { control: 'boolean' },
    },
    args: {
        min: 0,
        max: 100,
        step: 1,
    }
} satisfies Meta<typeof Slider>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
    args: {
        value: [50],
    },
};

export const CustomRange: Story = {
    args: {
        min: 0,
        max: 10,
        step: 0.1,
        value: [5.5],
    },
};

export const Disabled: Story = {
    args: {
        value: [30],
        disabled: true,
    },
};

export const Steps: Story = {
    args: {
        min: 0,
        max: 100,
        step: 25,
        value: [25],
    },
};