How to Build a Range Slider Component in React with RC-Slider

In this comprehensive guide, we will elaborate how to create a range slider component in React js using the rc-slider package.

An RC Slider is a special type of package used in React js to create intuitive user friendly range sliders. RC Slider can be integrated in class based as well as functional components in React js.

Rc slider offers extensive customization options to React developers. You can create simple sliders, slider with custom ranges and marks in React.

We have given the steps below that you can use to build a profound yet user friendly UI slider module in React.

React Js RC Range Slider Component Example

• Step 1: Create React Application
• Step 2: Install RC Slider Package
• Step 3: Create New Component
• Step 4: Create Basic RC Slider Component
• Step 5: Add Basic Ranges in Slider
• Step 6: Update Main Entry
• Step 7: View App on Browser

Create React Application

We will install a new React app framework; you can use the below command to create a new project.

npx create-react-app my-react-app

Now, app is installed. You have to enter into the app folder.

cd my-react-app

Install RC Slider Package

Now, you have to install the RC-slider module. To build the simple layout for our demo, we are using Bootstrap.

You can install both libraries using the given command.

npm i rc-slider bootstrap

Create New Component

You have to create a new components/ folder in the src/ directory; also create a RcSlider.js file.

Import the Slider and Range services from the ‘rc-slider’ package; to add the custom styling of rc-slider also add the ‘rc-slider/assets/index.css’ path;

import React from 'react'
import Slider, { Range } from 'rc-slider';
import 'rc-slider/assets/index.css';
function RcSlider() {
  return (
    <div></div>
  )
}
export default RcSlider

Create Basic RC Slider Component

We have created the function component previously; next we are going to build a basic slider component.

Therefore, add code into the components/RcSlider.js file.

import React from "react";
import "rc-slider/assets/index.css";
import Slider from "rc-slider";
function RcSlider() {
  return (
    <div>
      <Slider />
    </div>
  );
}
export default RcSlider;

Add Marks and Ranges in Rc Slider

In this step, we will show you how to create a range rc slider with custom marks in a React function component.

import React from "react";
import "rc-slider/assets/index.css";
import Slider from "rc-slider";
const style = { width: 400, margin: 50 };
const marks = {
  "-10": "-10°C",
  0: <strong>0°C</strong>,
  26: "26°C",
  37: "37°C",
  50: "50°C",
  100: {
    style: {
      color: "red",
    },
    label: <strong>100°C</strong>,
  },
};
function log(value) {
  console.log(value); //eslint-disable-line
}
function RcSlider() {
  return (
    <div>
      <div style={style}>
        <p>Range Slider with marks, `step=null`, pushable, draggableTrack</p>
        <Slider
          range
          min={-10}
          marks={marks}
          step={null}
          onChange={log}
          defaultValue={[-10, 0]}
          allowCross={false}
          pushable
        />
      </div>
    </div>
  );
}
export default RcSlider;

Update Main Entry

Next, we will register the RcSlider component in the App.js main file. Make sure to import and add the component name in the file as suggested below.

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import RcSlider from "./components/RcSlider";
function App() {
  return (
    <div className="container mt-5">
      <h2 className="mb-4">React Customize RC Slider Componenet Example</h2>
      <RcSlider />
    </div>
  );
}
export default App;

View App on Browser

We will eventually reached at the final step of this guide. In this step, we will use a single command to run the app on the browser.

npm start

After you ran the above command your app will be served on the browser with the given url:

http://localhost:3000

Summary

In this post, we have learned how to quite easily build a range slider component in React JS using the RC slider component.

We hope this tutorial has helped you understand how to implement rc slider component in React js environment.