React MUI Slider Input
Material-UI is a user interface framework that provides pre-defined and customizable React components for faster and easy web development. The Material-UI components are based on top of Material Design by Google. In this article let’s discuss the Slider API in the Material-UI library.
The Slider API of MUI is used to allow users to make selections from a range of values.
Slider API props:
- aria-label: It denotes the label of the slider.
- aria-labelledby: It denotes the id of the element containing a label for the slider.
- aria-valuetext: It denotes the string value for the current value of the slider.
- classes: It denotes the styles to override the default ones.
- color: It denotes the color of the component.
- components: It denotes the components used for each slot inside the slider API.
- componentsProps: It denotes the props used for each slot component inside the slider.
- defaultValue: It denotes the default value of the slider.
- disabled: It determines whether the slider is disabled.
- disableSwap: It determines whether the active thumb swaps when moving the pointer over a thumb while dragging another thumb.
- getAriaLabel: It denotes a callback function that returns the label for the slider thumb.
- getAriaValueText: It denotes a callback function that returns the current value of the slider.
- isRtl: It determines whether the theme context has RTL direction.
- marks: It determines whether the marks are spaced according to the value of the step prop.
- max: It denotes the maximum allowed value for the slider.
- min: It denotes the minimum allowed value for the slider.
- name: It denotes the name attribute of the input element.
- onChange: It denotes the callback function that returns the event triggered while changing the slider value.
- onChangeCommitted: It denotes the callback function that is triggered when the mouseup event is fired.
- orientation: It denotes the orientation of the slider.
- scale: It denotes the transformation function that helps in changing the scale of the slider.
- size: It denotes the size of the slider.
- step: It denotes the granularity with which the slider can step through values.
- sx: It denotes a system prop that allows defining system overrides and additional CSS styles.
- tabIndex: It denotes the tab-index value of the input element.
- track: It denotes the track presentation.
- value: It denotes the value of the slider.
- valueLabelDisplay: It controls when the value label is displayed.
- valueLabelFormat: It denotes the format function that helps in formatting the slider’s value.
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install @mui/material
Project Structure: It will look like the following.
Example 1: In this example, we will try to create a simple application that uses the Slider component to demonstrate 2 sliders with different sizes. Now write down the following code in the App.js file. Here, App is our default component where we have written our code:
Filename: App.js
Javascript
import * as React from 'react' ; import { Slider } from '@mui/material' ; export default function BasicButtonGroup() { return ( <div> <div className= "head" style={{ width: "fit-content" , margin: "auto" , }} > <h1 style={{ color: "green" , }} > w3wiki </h1> <strong>React MUI Slider API</strong> <br /> <br /> </div> <div style={{ width: "300px" , margin: "auto" , }} > <Slider size= "small" defaultValue={70} aria-label= "Small" valueLabelDisplay= "auto" /> <Slider defaultValue={50} aria-label= "Default" valueLabelDisplay= "auto" /> </div> </div> ); } |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Example 2: The below example demonstrates 2 different Sliders but with discrete value changes. Change your App.js like the one below.
Javascript
import * as React from 'react' ; import { Slider } from '@mui/material' ; export default function BasicButtonGroup() { return ( <div> <div className= "head" style={{ width: "fit-content" , margin: "auto" , }} > <h1 style={{ color: "green" , }} > w3wiki </h1> <strong>React MUI Slider API</strong> <br /> <br /> </div> <div style={{ width: "300px" , margin: "auto" , }} > <Slider aria-label= "Temperature" defaultValue={30} valueLabelDisplay= "auto" step={10} marks min={10} max={110} /> <Slider defaultValue={30} step={10} marks min={10} max={110} disabled /> </div> </div> ); } |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output:
Reference: https://mui.com/material-ui/react-slider/#main-content