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 custom styling, you can always refer to the API of the SVG icon component in Material-UI.
Prerequisites:
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 the initial state of the 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 valuesimport React, { useState } from "react";import "./App.css";//we import slider from material uiimport { 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.
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
