Slider
The API documentation of the Slider React component.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| classes | object | Override or extend the styles applied to the component. See CSS API below for more details. | |
| component | union: string | func | object |
'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. | |
| reverse | bool | If true, the slider will be reversed. |
|
| step | number | The granularity the slider can step through values. | |
| value * | number | The value of the slider. | |
| vertical | bool | If true, the slider will be vertical. |
Any other properties supplied will be spread to the root element (native element).
CSS API
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. |
| thumb | Styles applied to the thumb element. |
| reverse | Class applied to the root element to trigger JSS nested styles if reverse={true} . |
| 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 as documented
here,
you need to use the following style sheet name: MuiSlider.