Range Slider using Material UI in React

Material-UI is a React-based module. The Material-UI library provides users with the most efficient, effective, and user-friendly interface. For using the Range slider we need to install Material-UI. Moreover, for the custom styling, you can always refer to the API of the SVG icon component in Material-UI.

Prerequisites:

• Basics of ReactJS
• Already created ReactJS app

Below all the steps are described order wise to add colors to icons.

Installation:

• Step 1: Before moving further, firstly we have to install the Material-UI module, by running the following command in your project directory, with the help of terminal in your src folder or you can also run this command in Visual Studio Code’s terminal in your project folder.

npm install @material-ui/core  

• Step 2: After installing the module, now open your App.js file which is present inside your project’s directory, under src folder, and delete the code present inside it.
• Step 3: Now import React , useState ( for initial state of slider) from react and Slider from Material-UI module.
• Step 4: In your app.js file, add this code snippet to import  React , useState( for initial state of slider) from react and Slider from Material-UI module.

import React, { useState } from "react";
import { Slider } from "@material-ui/core";

The file structure of the project will look like:

Below is a sample program to illustrate the use of slider :

Example: Range slider for Current Temperature in the city.

Filename- src/App.js:

Javascript

//We use useState for the initial set values
import React, { useState } from "react";
import "./App.css";
//we import slider from material ui
import { Slider } from "@material-ui/core";

function App() {
  //Providing different values with labels
  const gfg = [
    {
      value: 0,
      label: "0°C",
    },
    {
      value: 25,
      label: "25°C",
    },
    {
      value: 50,
      label: "50°C",
    },
    {
      value: 100,
      label: "100°C",
    },
  ];

  const [val, setVal] = useState([0, 40]);
  const updateRange = (e, data) => {
    setVal(data);
  };
  return (
    <div className="App">
      <h1> What is the current temperature in your City ? </h1>
      <div style={{ width: 500, margin: 60 }}>
        <span> Temperature : </span>{" "}
        <Slider value={val} onChange={updateRange} marks={gfg} />
      </div>{" "}
    </div>
  );
}
export default App;

Filename- src/App.css:

CSS

body {
  margin: 0px;
}
.App {
  font-family: sans-serif;
  color: green;
  font-size: 16px;
}

span {
  color: red;
  font-size: 18px;
  font-weight: 13px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;

}

Output: Hence using the above-mentioned steps, we can use the Material-UI Slider to make a range slider in ReactJS.