mirror of
https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git
synced 2025-06-01 09:55:26 +08:00
7709d9df20
Co-authored-by: NFish <douxc512@gmail.com> Co-authored-by: zxhlyh <jasonapring2015@outlook.com> Co-authored-by: twwu <twwu@dify.ai> Co-authored-by: jZonG <jzongcode@gmail.com>
42 lines
1014 B
TypeScript
42 lines
1014 B
TypeScript
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('slider relative', className)}
|
|
thumbClassName={cn('absolute top-[-9px] h-5 w-2 rounded-[3px] border-[0.5px] border-components-slider-knob-border bg-components-slider-knob shadow-sm focus:outline-none', !disabled && 'cursor-pointer', thumbClassName)}
|
|
trackClassName={cn('slider-track h-0.5 rounded-full', trackClassName)}
|
|
onChange={onChange}
|
|
/>
|
|
}
|
|
|
|
export default Slider
|