42 lines
1014 B
TypeScript
Raw Permalink Normal View History

2023-05-15 08:51:32 +08:00
import ReactSlider from 'react-slider'
import cn from '@/utils/classnames'
2023-05-15 08:51:32 +08:00
import './style.css'
2023-05-15 08:51:32 +08:00
type ISliderProps = {
className?: string
2024-07-24 12:50:48 +08:00
thumbClassName?: string
trackClassName?: string
2023-05-15 08:51:32 +08:00
value: number
max?: number
min?: number
step?: number
disabled?: boolean
2023-05-15 08:51:32 +08:00
onChange: (value: number) => void
}
2024-07-24 12:50:48 +08:00
const Slider: React.FC<ISliderProps> = ({
className,
thumbClassName,
trackClassName,
max,
min,
step,
value,
disabled,
onChange,
}) => {
2023-05-15 08:51:32 +08:00
return <ReactSlider
disabled={disabled}
value={isNaN(value) ? 0 : value}
min={min || 0}
max={max || 100}
step={step || 1}
2024-07-31 17:46:43 +08:00
className={cn('relative slider', className)}
2024-09-08 12:14:11 +07:00
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)}
2024-07-31 17:46:43 +08:00
trackClassName={cn('h-0.5 rounded-full slider-track', trackClassName)}
onChange={onChange}
/>
2023-05-15 08:51:32 +08:00
}
export default Slider