React 18 Material UI Range Slider Component Example Tutorial

Sliders are popular UI control primarily used for choosing a particular value from a range of values.

Sliders are excellent UI component that offers an undeniable selection of values from a fixed set of options.

In this React Range Slider example, you will learn how to use React material UI library to create a Range slider in React JS app.

We will show you how to customize the slider component and create a discrete slider, custom marks in the slider component, and, most importantly, how to create a range slider in a function component.

React MUI slider offers a particular slider component. It allows users to make selections from a given range of values.

Sliders display a range of values followed by a horizontal bar; from there, users may choose a single value.

Sliders are excellent for adjusting settings such as volume, and brightness or applying image filters.

How to Create and Customize Range Slider in React JS using React Material UI

• Step 1: Build New Project
• Step 2: Install React Material UI Package
• Step 3: Create Function Class
• Step 4: Create Slider Component
• Step 5: Build Discrete Slider
• Step 6: Create Custom Marks in Slider
• Step 7: Create Range Slider
• Step 9: Update App JS Component
• Step 10: Run App on Browser

Build New Project

The given instruction guides you to install a brand new React application easily.

After you create the app, ensure that you have stepped inside the app folder.

npx create-react-app react-blog-app

cd react-blog-app

Install React Material UI Package

To create the slider component, you must install React Material UI library in React.

In the below, you see a command; make sure to execute the command to do the needful.

npm i @mui/material @emotion/react @emotion/styled --legacy-peer-deps

npm install @fontsource/roboto --legacy-peer-deps

Next task is to import the following code to register the React MUI fonts in the App.css file.

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap");

@import "@fontsource/roboto/300.css";
@import "@fontsource/roboto/400.css";
@import "@fontsource/roboto/500.css";
@import "@fontsource/roboto/700.css";

Create Function Class

To create the UI component we need a function class; hence create the components/ folder, along with the Form.js file.

import React from 'react'
function Form() {
  return (
    <div>Form</div>
  )
}
export default Form

Create Slider Component

For the very first slider, we are going to implement a basic slider. You have to import Box, Stack, Slider, and other essential components.

You have to now import and use material Box, Stack, Angular Material Icons in the Form component.

Add code into the components/Form.js file.

import * as React from "react";
import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";
import Slider from "@mui/material/Slider";
import VolumeDown from "@mui/icons-material/VolumeDown";
import VolumeUp from "@mui/icons-material/VolumeUp";
export default function Form() {
  const [value, setValue] = React.useState(30);
  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
  return (
    <Box sx={{ width: 300 }}>
      <Stack spacing={2} direction="row" sx={{ mb: 1 }} alignItems="center">
        <VolumeDown />
        <Slider aria-label="Volume" value={value} onChange={handleChange} />
        <VolumeUp />
      </Stack>
      <Slider disabled defaultValue={30} aria-label="Disabled slider" />
    </Box>
  );
}

Build Discrete Slider

Discrete sliders flexible and are fully capable of adjusting a specific value by referencing its value indicator.

Here is the example in which we are creating certain marks for each step with marks={true}.

import * as React from "react";
import Box from "@mui/material/Box";
import Slider from "@mui/material/Slider";
function valuetext(value) {
  return `${value}°C`;
}
export default function Form() {
  return (
    <Box sx={{ width: 300 }}>
      <Slider
        aria-label="Temperature"
        defaultValue={30}
        getAriaValueText={valuetext}
        valueLabelDisplay="auto"
        step={10}
        marks
        min={10}
        max={110}
      />
      <Slider defaultValue={30} step={10} marks min={10} max={110} disabled />
    </Box>
  );
}

Create Custom Marks in Slider

We can create and register an array of data in order to create custom marks in React slider.

import * as React from "react";
import Box from "@mui/material/Box";
import Slider from "@mui/material/Slider";
const marks = [
  {
    value: 0,
    label: "0°C",
  },
  {
    value: 20,
    label: "20°C",
  },
  {
    value: 37,
    label: "37°C",
  },
  {
    value: 100,
    label: "100°C",
  },
];
function valuetext(value) {
  return `${value}°C`;
}
export default function Form() {
  return (
    <Box sx={{ width: 400 }}>
      <Slider
        aria-label="Custom marks"
        defaultValue={20}
        getAriaValueText={valuetext}
        step={10}
        valueLabelDisplay="auto"
        marks={marks}
      />
    </Box>
  );
}

Create Range Slider

Now, we will create a range slider. A range slider allows users to select values from two given ranges.

The range slider is typically used to set the start and end of a range by providing an array of values to the value prop.

import * as React from "react";
import Box from "@mui/material/Box";
import Slider from "@mui/material/Slider";
function valuetext(value) {
  return `${value}°C`;
}
export default function Form() {
  const [value, setValue] = React.useState([20, 37]);
  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
  return (
    <Box sx={{ width: 300 }}>
      <Slider
        getAriaLabel={() => "Temperature range"}
        value={value}
        onChange={handleChange}
        valueLabelDisplay="auto"
        getAriaValueText={valuetext}
      />
    </Box>
  );
}

Update App JS Component

Furthermore, you will have to import the Form component inside the main App.js component file.

import React from "react";
import Form from "./components/Form";
function App() {
  return (
    <div>
      <h2>React Material UI Range Slider Example</h2>
      <Form />
    </div>
  );
}
export default App;

Run App on Browser

The last convention is to start the app. You can use a single command to invoke the React server; It will provide a URL that you can use to view the app.

npm start

http://localhost:3000

Conclusion

In this guide, we have seen how to implement a Range slider in React JS application using the React Material UI library.

We also learned how to create a basic slider component, build a discrete slider in React, and create custom marks in React slider component.