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

const meta = {
  title: 'UI/Slider',
  component: Slider,
  tags: ['autodocs'],
  parameters: {
    docs: {
      description: {
        component: 'Schieberegler für numerische Werte. `min`, `max`, `value` (bindbar). Optionales Label.',
      },
    },
  },
  argTypes: {
    value: { control: { type: 'number', min: 0, max: 100 } },
    min: { control: 'number' },
    max: { control: 'number' },
  },
} satisfies Meta<Slider>;

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

export const Default: Story = {
  args: {
    label: 'Wert',
    min: 0,
    max: 100,
    value: 50,
  },
};

export const WithRange: Story = {
  args: {
    label: 'Jahre',
    min: 1990,
    max: 2030,
    value: 2025,
  },
};

export const Disabled: Story = {
  args: {
    label: 'Deaktiviert',
    value: 25,
    disabled: true,
  },
};
