1. HTML <input> etiketi ile custom range slider bileşeni oluşturma: Bu yöntemde,

   RangeSlider

   adında reusable bir bileşen oluşturulur ve bu bileşen, minimum, maksimum değer ve onChange olayı gibi özellikleri yönetir 1.

import { useState } from 'react';
import RangeSlider from './rangeSlider';

function App() {
  const [sliderProps, setSliderProps] = useState({
    min: 0,
    max: 250,
  });
  const [inputValue, setInputValue] = useState(0);

  const handleValueChange = e => {
    setInputValue(e.target.value);
  };

  return (
    <RangeSlider
      {...sliderProps}
      onChange={handleValueChange}
      value={inputValue}
    />
  );
}
Kopyala

2. react-slider kütüphanesi ile slider oluşturma: Bu kütüphane, özelleştirilebilir ve CSS'den bağımsız bir slider bileşeni sunar 23.

import ReactSlider from "react-slider";

const Slider = () => {
  return (
    <ReactSlider
      className="horizontal-slider"
      thumbClassName="example-thumb"
      trackClassName="example-track"
    />
  );
};
Kopyala