Today we’ll show you how to create a slider component in React because sometimes you might need to implement the simple slider to get the value based on the horizontal slider.

In this article, we will create a ReactJS demo for a slider component using the rc-slider npm package. We can also create a range slider in react using the same package. So let’s implement the example for a slider.

Steps to implement a slider

1. Create a react application
2. Install the npm package
3. Implement the slider
4. Output

1. Create a react application

Let’s create a simple startup application using create-react-app. Refer to this article for more information.

2. Install the npm package

In the next step, we have to install the rc-slider npm package to implement the slider component. You can check more article of the React Package.

Run the following command to install the package.

3. Implement the slider

Now let’s implement a demo to select a value between the range using a slider.

Use the following code to import a slider from the package. We will also import the CSS for design purposes.

After importing the package, let’s use it to render a slider in DOM.

In the above code, we have defined the props of the slider where we have set the minimum and maximum value of the slider. Also we have defined the step of the slider and marks. Check out the more props for your reference.

Most important thing is that we have defined the value of the marks as object i.e. {key: value, key1: value1, ...} where the all key attributes will be consider as a value and the value attributes will be used for display purpose.

We have used the useState hooks to store the selected value of the slider and display it.

4. Output

So let’s merge all above code together and see how it looks in the browser.

App.js

Check out the output in the browser.

That’s it for today.
Thank you for reading. Happy Coding..!!

Demo & Source Code