Clue Mediator

Slider Component in React

📅June 11, 2020

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">React Package.

Run the following command to install the package.

npm i rc-slider

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.

import Slider from 'rc-slider';
import 'rc-slider/assets/index.css';

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

const [value, setValue] = useState(0.2);

const sliderProps = {
  min: 0.0,
  max: 1.0,
  step: 0.05,
  marks: { 0.0: 0, 0.1: 10, 0.2: 20, 0.3: 30, 0.4: 40, 0.5: 50, 0.6: 60, 0.7: 70, 0.8: 80, 0.9: 90, 1.0: 100 }
}

return (
  <div class="App">
    <slider value={value} onchange="{val" ==""> setValue(val)}
      {...sliderProps}
    />
    <div 40="" style={{ margintop: }}><b>Selected Value: </b>{value}</div>
  </slider></div>
);

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 api" title="props">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

import React, { useState } from 'react';

import Slider from 'rc-slider';
import 'rc-slider/assets/index.css';

function App() {

  const [value, setValue] = useState(0.2);

  const sliderProps = {
    min: 0.0,
    max: 1.0,
    step: 0.05,
    marks: { 0.0: 0, 0.1: 10, 0.2: 20, 0.3: 30, 0.4: 40, 0.5: 50, 0.6: 60, 0.7: 70, 0.8: 80, 0.9: 90, 1.0: 100 }
  }

  return (
    <div class="App">
      <h3>Slider Component in React - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3>
      <slider value={value} onchange="{val" ==""> setValue(val)}
        {...sliderProps}
      />
      <div 40="" style={{ margintop: }}><b>Selected Value: </b>{value}</div>
    </slider></div>
  );
}

export default App;

Check out the output in the browser.

Output - Slider Component in React - Clue Mediator

Output - Slider Component in React - Clue Mediator

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

Demo & Source Code

Github Repository StackBlitz Project