1import { useState } from 'react';
2
3import Slider, { SliderSizeEnum } from './Slider';
4import mdx from './Slider.mdx';
5
6export default {
7    component: Slider,
8    title: 'components/Slider',
9    parameters: {
10        docs: {
11            page: mdx,
12        },
13    },
14};
15
16export const Basic = () => {
17    const [value, setValue] = useState(25);
18
19    return (
20        <div className="p-7">
21            <Slider value={value} onChange={setValue} />
22        </div>
23    );
24};
25
26export const Marks = () => {
27    const [value, setValue] = useState(25);
28
29    return (
30        <div className="p-7">
31            <Slider marks value={value} onChange={setValue} />
32        </div>
33    );
34};
35
36export const Color = () => {
37    const [value, setValue] = useState(25);
38
39    return (
40        <div className="p-7">
41            <div>
42                <Slider color="success" value={value} onInput={setValue} />
43            </div>
44            <div className="mt-8">
45                <Slider color="danger" value={value} onInput={setValue} />
46            </div>
47            <div className="mt-8">
48                <Slider color="info" value={value} onInput={setValue} />
49            </div>
50            <div className="mt-8">
51                <Slider color="norm" value={value} onInput={setValue} />
52            </div>
53            <div className="mt-8">
54                <Slider color="warning" value={value} onInput={setValue} />
55            </div>
56            <div className="mt-8">
57                <Slider color="weak" value={value} onInput={setValue} />
58            </div>
59        </div>
60    );
61};
62
63export const Size = () => {
64    const [value, setValue] = useState(25);
65
66    return (
67        <div className="p-7">
68            <div>
69                <Slider size={SliderSizeEnum.Small} value={value} onInput={setValue} />
70            </div>
71            <div className="mt-8">
72                <Slider value={value} onInput={setValue} />
73            </div>
74        </div>
75    );
76};
77
78export const Step = () => {
79    const [value, setValue] = useState(0.2);
80
81    return (
82        <div className="p-7">
83            <Slider step={0.01} min={0} max={1} value={value} onChange={setValue} />
84        </div>
85    );
86};
87
88export const MinMax = () => {
89    const [value, setValue] = useState(2000);
90
91    return (
92        <div className="p-7">
93            <Slider min={1000} max={10000} value={value} onChange={setValue} />
94        </div>
95    );
96};
97
98export const MinMaxInverted = () => {
99    const [value, setValue] = useState(-10);
100
101    return (
102        <div className="p-7">
103            <Slider min={20} max={-20} value={value} onChange={setValue} />
104        </div>
105    );
106};
107
108export const CustomValueDisplayFormat = () => {
109    const [value, setValue] = useState(20);
110
111    return (
112        <div className="p-7">
113            <Slider value={value} onChange={setValue} getDisplayedValue={(v) => `${v.toFixed(2)}px`} />
114        </div>
115    );
116};