Material UI is a Material Design library made for React.
It’s a set of React components that have Material Design styles.
In this article, we’ll look at how to add sliders with Material UI.
Discrete Sliders
We can add sliders to snaps to discrete values.
To do that, we set the marks prop to true .
For instance, we can write:
import React from "react";
import Slider from "@material-ui/core/Slider";
export default function App() {
return (
<form>
<Slider marks />
</form>
);
}
to make an uncontrolled slider that snaps to the nearest 10.
Small Steps
We can change the steps with the steps prop.
For example, we can write:
import React from "react";
import Slider from "@material-ui/core/Slider";
export default function App() {
return (
<form>
<Slider step={0.00001} marks />
</form>
);
}
to change the increment between each discrete value.
Custom Marks
We can add our own custom marks with the marks prop.
For example, we can write:
import React from "react";
import Slider from "@material-ui/core/Slider";
const marks = [
{
value: 0,
label: "0m"
},
{
value: 25,
label: "25m"
},
{
value: 50,
label: "50m"
},
{
value: 75,
label: "75m"
},
{
value: 100,
label: "100m"
}
];
export default function App() {
return (
<form>
<Slider step={10} marks={marks} valueLabelDisplay="auto" />
</form>
);
}
We add the marks array with the value and label properties in each entry to show the labels with the text in the label property.
Restricted Values
We can restrict values to the ones that are in the marks array by setting step to null .
For example, we can write:
import React from "react";
import Slider from "@material-ui/core/Slider";
const marks = [
{
value: 0,
label: "0m"
},
{
value: 25,
label: "25m"
},
{
value: 50,
label: "50m"
},
{
value: 75,
label: "75m"
},
{
value: 100,
label: "100m"
}
];
export default function App() {
return (
<form>
<Slider step={null} marks={marks} valueLabelDisplay="auto" />
</form>
);
}
Now we can only select the values that are marked in the marks array because of the null value we passed into the step prop.
Make Label Always Visible
We can make the labels always visible by setting the valueLabelDisplay prop to on .
For example, we can write:
import React from "react";
import Slider from "@material-ui/core/Slider";
const marks = [
{
value: 0,
label: "0m"
},
{
value: 25,
label: "25m"
},
{
value: 50,
label: "50m"
},
{
value: 75,
label: "75m"
},
{
value: 100,
label: "100m"
}
];
export default function App() {
return (
<form>
<Slider step={10} valueLabelDisplay="on" marks={marks} />
</form>
);
}
Now we see the value above the slider dot.
Range Slider
We can allow users to select a value range with the Slider .
To do that, we can set an array as the value as the initial value.
For example, we can write:
import React from "react";
import Slider from "@material-ui/core/Slider";
export default function App() {
const [value, setValue] = React.useState([20, 30]);
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<form>
<Slider valueLabelDisplay="auto" value={value} onChange={handleChange} />
</form>
);
}
to make a range slider.
We set an array as the initial value of the value state to make the slider a range slider.
Vertical Sliders
We can make a slider vertical with the orientation prop set to vertical .
For instance, we can write:
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Slider from "@material-ui/core/Slider";
const useStyles = makeStyles({
root: {
height: 300
}
});
export default function App() {
const classes = useStyles();
return (
<div className={classes.root}>
<Slider
orientation="vertical"
valueLabelDisplay="auto"
defaultValue={30}
/>
</div>
);
}
to create a vertical slider.
We’ve to set the height of the wrapper so that the slider is displayed.
Track
We can set track to false to remove the track that’s displayed when we select a value.
To do that, we write:
import React from "react";
import Slider from "@material-ui/core/Slider";
export default function App() {
return (
<div>
<Slider track={false} defaultValue={30} />
</div>
);
}
to remove th track.
We can also set it to inverted to change the track to be opposite of the default.
Non-Linear Scale
The scale is linear by default, but we can change it to a nonlinear scale with the scale prop set to a function.
We can write:
import React from "react";
import Slider from "@material-ui/core/Slider";
export default function App() {
return (
<div>
<Slider scale={x => x ** 5} defaultValue={30} />
</div>
);
}
to change the scale.
Conclusion
We can add sliders to let users select a number or a range of numbers from a slider.
