Slider

Slider.tsx

import React, { useState, useRef, useEffect } from 'react';
import styles from './Slider.module.css';

type SliderProps = {
  min: number;
  max: number;
  step: number;
  value: number;
  onChange: (value: number) => void;
}

const Slider = ({ min, max, step, value, onChange }: SliderProps) => {
  const [sliderValue, setSliderValue] = useState<number>(value);
  const sliderRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (sliderRef.current) {
      sliderRef.current.value = sliderValue.toString();
    }
  }, [sliderValue]);

  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = Number(event.target.value);
    setSliderValue(newValue);
    onChange(newValue);
  };

  return (
    <div className={styles.slider}>
      <input
        type="range"
        ref={sliderRef}
        min={min}
        max={max}
        step={step}
        value={sliderValue}
        onChange={handleInputChange}
      />
      <span>{sliderValue}</span>
    </div>
  );
}

export default Slider;

Usage

import React, { useState } from 'react';
import Slider from './Slider';

const App = () => {
  const [sliderValue, setSliderValue] = useState<number>(5);

  const handleSliderChange = (newValue: number) => {
    setSliderValue(newValue);
  };

  return (
    <div>
      <h1>Slider Value: {sliderValue}</h1>
      <Slider min={1} max={10} step={1} value={sliderValue} onChange={handleSliderChange} />
    </div>
  );
}

export default App;

Slider.module.css