All files / src/stories Slider.stories.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Story } from '@storybook/react';
import React from 'react';
import { Box } from '@mui/material';
import Slider, { SliderProps } from '../components/Slider';
 
export default {
  title: 'Slider',
  component: Slider,
};
 
const Template: Story<SliderProps> = (args) => {
  return (
    <Box height='100vh' display='flex' alignItems='center'>
      <Slider {...args} />
    </Box>
  );
};
 
export const Default = Template.bind({});
 
export const SnapToMark = Template.bind({});
 
const marks = [
  {
    label: '0%',
    value: 0,
  },
  {
    value: 25,
  },
  {
    label: '50%',
    value: 50,
  },
  {
    value: 75,
  },
  {
    label: '100%',
    value: 100,
  },
];
 
Default.args = {
  defaultValue: 50,
  min: 0,
  max: 100,
  step: 1,
  marks,
  valueLabelDisplay: 'auto',
};
 
SnapToMark.args = {
  defaultValue: 50,
  marks,
  valueLabelDisplay: 'auto',
  onChange: (value) => alert(`Power level at ${value}%`),
};