import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { Slider } from '../../src/slider/slider';
import { useState } from 'react';
import { ReactComponent as WarningIcon } from '../../src/assets/icons/warning.svg';

<Meta title="Components/Slider" component={Slider} />

export const Template = (args) => {
    const [value, setValue] = useState(10);
    return (
        <div className="ds-w-[200px]">
            <Slider {...args} value={value} onChange={(_,newValue) => setValue(newValue)} />
        </div>
    );
};

# Regular

<Canvas>
    <Story name="Regular">{Template.bind({})}</Story>
    <Story
        name="Disabled"
        args={{
            disabled: true,
        }}
    >
        {Template.bind({})}
    </Story>
</Canvas>