please add a new component called slider to the frontend

[colin-codegen]

The approach involves creating a new reusable Slider component in a file named Slider.tsx under the src/components directory. This component will accept value, min, max, step, and onChange as props. Inside this, the onChange function prop is a callback for whenever the slider's value changes. Here is a key piece of the code for the Slider component:

const Slider: React.FC<SliderProps> = ({ value, min = 0, max = 100, step = 1, onChange }) => {
  const handleSliderChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    onChange(Number(event.target.value));
  };

  return (
    <div className="slider-container">
      <input
        type="range"
        min={min}
        max={max}
        step={step}
        value={value}
        onChange={handleSliderChange}
        className="slider"
      />
    </div>
  );
};