How to Create a Reusable Range Slider in React

1. Use HTML <input> to Create a Custom RangeSlider React Component
2. Use the multi-range-slider-react Library to Create Multi-Range Slider in React

This article will teach us to create the range slider in React.

It is simple to create a range slider using the HTML <input> tag, but we will learn to manage the current value of the range slider in React. We will also make the RangeSlider component reusable to reuse it inside another component.

Use HTML <input> to Create a Custom RangeSlider React Component

In this example, we have created two files called App.js and rangeSlider.js. In the App.js file, we have imported the RangeSlider component and reused it, and we are managing the current value of the range slider from the parent component, App.

Furthermore, we have passed the props inside the RangeSlider component. As a prop, we have passed the value variable, which we are getting from the RangeSlider component.

Also, we have passed the minimum and maximum value of the range slider in the form of an object named sliderProps.

handleValueChange() is passed as a prop inside the RangeSlider component and stored inside the onChange variable.

<RangeSlider {...sliderProps} onChange={handleValueChange} value={inputValue} />

Inside the rangeSlider.js file, we are showing the slider’s current value, which we got in the props from the parent component. We have created the HTML range slider using the <input> tag and set up the value of the min and max attributes using the values we got in the sliderProps object from the parent component.

Whenever the onChange event triggers for the HTML input, it calls the function stored inside the onChange variable, which is handleValueChange().

<input {...props.sliderProps} type="range" value={props.value} onChange={props.onChange} />

Before executing the example code given below, users should ensure that code is added to the respective file and the filename is correctly given; otherwise, it can cause an importing error.

Example Code:

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

function App() {
  // set slider props
  const [sliderProps, setSliderProps] = useState({
    min: 0,
    max: 250,
  });
  // set input value
  const [inputValue, setinputValue] = useState(0);

  //  handle the changes in the input value of the range slider
  const handleValueChange = e => {
    setinputValue(e.target.value);
  };


  return (
    //  reuse the range slider component
    // passed some values as props to use inside the RangeSlider component
     <RangeSlider
       {...sliderProps}
       onChange={handleValueChange}
       value={inputValue} />
  );
}

export default App;

function RangeSlider(props) {
  return (
    <div>
      <p>Reusable Slider Component In React</p>
      {/* showing the value of the range slider in the child component, which we are getting from the parent component in the form of props */}
      <h3>Slider Value: {props.value}</h3>
      {/* slider input */}
      <input
        {...props.sliderProps}
        type="range"
        value={props.value}
        onChange={props.onChange}
      />
    </div>
  );
}
//  export range slider component
export default RangeSlider;

Output:

The above output shows how the reusable RangeSlider component works like a normal component. Also, users can see the current value of the range slider on the screen.

Use the multi-range-slider-react Library to Create Multi-Range Slider in React

We have created the single range slider in the above example and reused it. Now, we will create the multi-range slider using the multi-range-slider-react built-in React library.

The multi-range slider allows users to set the minimum and maximum values separately.

To use the multi-range-slider-react library in the React app, users need to install it first. To install the multi-range-slider-react library in the application, open the terminal in the directory of the React app and run the following command:

npm install multi-range-slider-react

After that, we can import the library into the React app and use the MultiRangeSlider component. Also, we can pass some values as a prop in the MultiRangeSlider component.

The structure to use the MultiRangeSlider component is given below.

<MultiRangeSlider min={0} max={50} step={2} minValue={mini} maxValue={maxi} onInput={(e) => { handleChangeInput(e); }} />

We have written the complete example code to use the MultiRangeSlider component here. It calls the handleChangeInput() function whenever any changes occur in the input.

Example Code:

// import required libraries
import React, { useState } from "react";
import MultiRangeSlider from "multi-range-slider-react";
function App() {
  // set the initial minimum and maximum value for the multi-range slider
const [mini, changeMinValue] = useState(2);
const [maxi, changeMaxValue] = useState(13);
// whenever input changes, set a new value for mini and maxi
const handleChangeInput = (e) => {
	changeMinValue(e.minValue);
	changeMaxValue(e.maxValue);
};
return (
    <div >
    {/* rendering mini and maxi value on the DOM */}
    <h3>Current Minimum Value Of slider is: {mini}</h3>
    <h3>Current Maximum Value Of slider is: {maxi}</h3>
    {/* using the MultiRangeSlider Component */}
		<MultiRangeSlider
	        min={0}
		    max={50}
	        step={2}
		    minValue={mini}
		    maxValue={maxi}
	        onInput={(e) => {
			   handleChangeInput(e);
		    }}
		/>
	</div>
	);
}
export default App;

Output:

In the above output, users can see that the multi-range slider allows setting the minimum and maximum values on the slider.

We have learned to create single-range and multi-range sliders in this article and used the reusable component for both.