import Builder, { ColorsControl, toProps } from "../../utils/builder";
export default {
    title: 'Fields/Slider',
    component: 'x-slider',
    argTypes: {
        color: ColorsControl,
    },
};
const Template = new Builder(args => `<div>
	<x-slider ${toProps(args)}></x-slider>
</div>`);
export const Simple = Template.args({
    max: 100,
    value: 50,
}).build();
export const Loading = Template.args({
    label: 'Select a value',
    loading: true,
    max: 100,
    value: 50,
}).build();
export const Disabled = Template.args({
    label: 'Select a value',
    disabled: true,
    max: 100,
    value: 50,
}).build();
export const WithLabel = Template.args({
    label: 'Select a value',
    min: 30,
    max: 50,
    value: 50,
}).build();
export const WithSteps = Template.args({
    label: 'Wich percentage do you want?',
    min: 0,
    max: 100,
    value: 20,
    step: 5,
}).build();
export const WithUnit = Template.args({
    label: 'How many you will pay?',
    min: (240.99 / 10),
    max: 240.99,
    value: 0,
    step: (240.99 / 10),
    unit: '$',
    unitPosition: 'left',
    decimals: 2,
}).build();
export const WithInformation = Template.args({
    label: 'Select a value',
    min: 30,
    max: 50,
    value: 50,
    info: 'This is a field with a description hover info icon'
}).build();
