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",
                    }}
                >
                    GeeksforGeeks
                </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",
                    }}
                >
                    GeeksforGeeks
                </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