🎉 Material UI v4 is out now! Check out the announcement blog post →
Slider

Slider API

The API documentation of the Slider React component. Learn more about the properties and the CSS customization points.

import Slider from '@material-ui/lab/Slider';

Props

Name Type Default Description
classes object Override or extend the styles applied to the component. See CSS API below for more details.
component Component 'div' The component used for the root node. Either a string to use a DOM element or a component.
disabled bool If true, the slider will be disabled.
max number 100 The maximum allowed value of the slider. Should not be equal to min.
min number 0 The minimum allowed value of the slider. Should not be equal to max.
onChange func Callback function that is fired when the slider's value changed.
onDragEnd func Callback function that is fired when the slide has stopped moving.
onDragStart func Callback function that is fired when the slider has begun to move.
step number The granularity the slider can step through values.
thumb element The component used for the slider icon. This is optional, if provided should be a react element.
value * number The value of the slider.
valueReducer func function defaultValueReducer(rawValue, props) { const { disabled, step } = props; if (disabled) { return null; } if (step) { return roundToStep(rawValue, step); } return Number(rawValue.toFixed(3));} the reducer used to process the value emitted from the slider. If null or the same value is returned no change is emitted.

Signature:
function(rawValue: number, props: SliderProps, event: Event) => void
rawValue: value in [min, max]
props: current props of the Slider
event: the event the change was triggered from
vertical bool If true, the slider will be vertical.

Any other properties supplied will be spread to the root element (native element).

CSS

You can override all the class names injected by Material-UI thanks to the classes property. This property accepts the following keys:

Name Description
root Styles applied to the root element.
container Styles applied to the container element.
track Styles applied to the track elements.
trackBefore Styles applied to the track element before the thumb.
trackAfter Styles applied to the track element after the thumb.
thumbWrapper Styles applied to the thumb wrapper element.
thumb Styles applied to the thumb element.
thumbIconWrapper Class applied to the thumb element if custom thumb icon provided.
thumbIcon
disabled Class applied to the track and thumb elements to trigger JSS nested styles if disabled.
jumped Class applied to the track and thumb elements to trigger JSS nested styles if jumped.
focused Class applied to the track and thumb elements to trigger JSS nested styles if focused.
activated Class applied to the track and thumb elements to trigger JSS nested styles if activated.
vertical Class applied to the root, track and container to trigger JSS nested styles if vertical.

Have a look at overriding with classes section and the implementation of the component for more detail.

If using the overrides key of the theme, you need to use the following style sheet name: MuiSlider.

Demos