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) => voidrawValue: 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.