interface SliderProps {

  label: string;

  value: number;

  min: number;

  max: number;

  step?: number;

  onChange: (value: number) => void;

}

export function Slider({ label, value, min, max, step = 1, onChange }: SliderProps) {

  return (

    <div className="slider-row">

      <div className="slider-header">

        <label>{label}</label>

        <span className="slider-value">{value}</span>

      </div>

      <input

        type="range"

        min={min}

        max={max}

        step={step}

        value={value}

        onChange={(e) => onChange(Number(e.target.value))}

      />

    </div>

  );

}