Creating a Custom Slider Component in React

f you have ever used a slider component on a website, you know how useful it can be to quickly select a value within a range. In this tutorial, we’ll create a custom slider component in React that allows the user to select a value within a specified range.

Getting Started

To get started, let’s create a new React component named Slider. This component will take in several props, including the minimum and maximum values, the current value, and a function to be called when the value changes.

import React, { useState } from 'react';
type Props = {
  min: number;
  max: number;
  value: number;
  onChange: (value: number) => void;
};
const Slider: React.FC<Props> = ({ min, max, value, onChange }) => {
  const [isDragging, setIsDragging] = useState(false);
  // additional code will be added here
}

Next, let’s add some state to our component. We’ll create a boolean state variable to keep track of whether the user is currently dragging the slider.

const [isDragging, setIsDragging] = useState(false);

Handling Dragging Events

To handle dragging events on our slider, we’ll need to define a few functions.

The first function, getPercentage, will take in a value and return the percentage of the slider's range that the value represents.

const getPercentage = (value: number) => ((value - min) / (max - min)) * 100;

Next, we’ll define a function to be called when the user starts dragging the slider. This function will set the isDragging state variable to true.

const handleDragStart = () => {
  setIsDragging(true);
};

We’ll also need a function to be called when the user stops dragging the slider. This function will set the isDragging state variable to false.

const handleDragEnd = () => {
  setIsDragging(false);
};

Finally, we’ll define a function to be called when the user is actively dragging the slider. This function will calculate the new value of the slider based on the current mouse position and update the value prop using the onChange function.

const handleDrag = (event: React.MouseEvent<HTMLDivElement>) => {
  if (!isDragging) return;

  const { left, width } = event.currentTarget.getBoundingClientRect();
  const percentage = (event.clientX - left) / width;
  const newValue = Math.round(min + percentage * (max - min));
  onChange(newValue);
};

Rendering the Slider

Now that we have defined our event handling functions, let’s add the necessary JSX to render our slider.

We’ll start by creating a track for the slider using a div element. The width of this element will be based on the current value of the slider, which we can calculate using our getPercentage function.

const trackStyle = `bg-gradient-to-r from-yellow-500 to-red-500 h-2 rounded-full ${isDragging ? 'cursor-grabbing' : 'cursor-pointer'}`;

return (
  <div className="flex items-center">
    <div className="w-full h-2 bg-gray-800 rounded-full">
      <div
        className={trackStyle}
        style={{ width: `${getPercentage(value)}%` }}
        onMouseDown={handleDragStart}
        onMouseUp={handleDragEnd}
        onMouseMove={handleDrag}
      ></div>
    </div>
    {/* additional code will be added here */}
  </div>
);