How to Build Range Slider with Custom Markers in React 18

Last Updated on March 4, 2024 by Digamber in React JS

A range slider is a user interface component that allows users to select specific values from a predefined range. It is laid down on a web page either horizontally or vertically, providing users with the ability to choose a particular value from a range of defined options, resulting in a mesmerizing user experience in web and mobile applications.

In this quick tutorial, we will walk you through a series of processes on how to create a range slider component with custom markers in a React application using the rc-slider package.

The rc-slider is a slider UI component mainly used in web applications for building a range slider component and allows web developers to create custom markers in range slider.

Due to its responsive nature, it works on every screen size and supports a wide range of browsers, including Chrome, Firefox, Edge, and Safari. With our React range slider code example, you can create a simple range slider, but if you want to create an advanced range slider in React,.

React Js RC Range Slider Component Example

For advance usage, check its official documentation. It allows customizing the range slider color, theme, and position, which adds easy functionality to your projects and guarantees upliftment in the user experience.

Let’s start coding the range slider component in React.

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 --legacy-peer-deps

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

Build Range Slider with Custom Marks

In this step, we will show you how to create a range slider with custom marks in a 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 "./App.css";

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 Custom Range Slider 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.