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}
      />
    </>
  )
}