2023-05-15 08:51:32 +08:00
|
|
|
import ReactSlider from 'react-slider'
|
2023-11-13 22:32:39 +08:00
|
|
|
import cn from 'classnames'
|
2023-05-15 08:51:32 +08:00
|
|
|
import './style.css'
|
2023-11-18 11:53:35 +08:00
|
|
|
|
2023-05-15 08:51:32 +08:00
|
|
|
type ISliderProps = {
|
2023-11-13 22:32:39 +08:00
|
|
|
className?: string
|
2023-05-15 08:51:32 +08:00
|
|
|
value: number
|
|
|
|
max?: number
|
|
|
|
min?: number
|
|
|
|
step?: number
|
2023-10-12 23:14:28 +08:00
|
|
|
disabled?: boolean
|
2023-05-15 08:51:32 +08:00
|
|
|
onChange: (value: number) => void
|
|
|
|
}
|
|
|
|
|
2023-11-13 22:32:39 +08:00
|
|
|
const Slider: React.FC<ISliderProps> = ({ className, max, min, step, value, disabled, onChange }) => {
|
2023-05-15 08:51:32 +08:00
|
|
|
return <ReactSlider
|
2023-10-12 23:14:28 +08:00
|
|
|
disabled={disabled}
|
2023-08-12 00:57:13 +08:00
|
|
|
value={isNaN(value) ? 0 : value}
|
|
|
|
min={min || 0}
|
|
|
|
max={max || 100}
|
|
|
|
step={step || 1}
|
2023-11-13 22:32:39 +08:00
|
|
|
className={cn(className, 'slider')}
|
2023-08-12 00:57:13 +08:00
|
|
|
thumbClassName="slider-thumb"
|
|
|
|
trackClassName="slider-track"
|
|
|
|
onChange={onChange}
|
|
|
|
/>
|
2023-05-15 08:51:32 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
export default Slider
|