src/components/ControlSlider.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

import React from "react";

interface ControlSliderProps {
  label: string;
  name: string;
  value: number;
  min: number;
  max: number;
  step: number;
  onChange: (value: string) => void;
}

export const ControlSlider: React.FC<ControlSliderProps> = ({
  label,
  name,
  value,
  min,
  max,
  step,
  onChange,
}) => {
  return (
    <div className="control-row">
      <label>{label}</label>
      <input
        type="range"
        name={name}
        min={min}
        max={max}
        value={value}
        onChange={(event) => onChange(event.target.value)}
        step={step}
      />
    </div>
  );
};