qcast-front/src/components/ui/RangeSlider.jsx
2024-07-02 16:27:44 +09:00

29 lines
709 B
JavaScript

export default function RangeSlider(
props = { title: 'default title', initValue: 0, onchange: () => {}, step: 1, min:0, max:100},
) {
const { title, initValue, onchange, step, min, max } = props
const handleChange = (e) => {
// console.log(e.target.value)
onchange(e.target.value)
}
return (
<>
<label htmlFor="default-range" className="block mb-2 text-gray-900">
{title}
</label>
<input
id="default-range"
type="range"
value={initValue}
min={min}
max={max}
step={step}
className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
onChange={handleChange}
/>
</>
)
}