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
| import ReactSlider from 'react-slider'
| import cn from '@/utils/classnames'
| import './style.css'
|
| type ISliderProps = {
| className?: string
| thumbClassName?: string
| trackClassName?: string
| value: number
| max?: number
| min?: number
| step?: number
| disabled?: boolean
| onChange: (value: number) => void
| }
|
| const Slider: React.FC<ISliderProps> = ({
| className,
| thumbClassName,
| trackClassName,
| max,
| min,
| step,
| value,
| disabled,
| onChange,
| }) => {
| return <ReactSlider
| disabled={disabled}
| value={isNaN(value) ? 0 : value}
| min={min || 0}
| max={max || 100}
| step={step || 1}
| className={cn('relative slider', className)}
| thumbClassName={cn('absolute top-[-9px] w-2 h-5 border-[0.5px] border-components-slider-knob-border rounded-[3px] bg-components-slider-knob shadow-sm focus:outline-none', !disabled && 'cursor-pointer', thumbClassName)}
| trackClassName={cn('h-0.5 rounded-full slider-track', trackClassName)}
| onChange={onChange}
| />
| }
|
| export default Slider
|
|
