useSlider API
Demos
For examples and details on the usage of this React hook, visit the demo pages:
Import
import useSlider from '@mui/base/useSlider';Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| ref* | React.Ref<any> | The ref attached to the root of the Slider. | |
| aria-labelledby | string | The id of the element containing a label for the slider. | |
| defaultValue | number | number[] | The default value. Use when the component is not controlled. | |
| disabled | boolean | false | If true, the component is disabled. |
| disableSwap | boolean | false | If true, the active thumb doesn't swap when moving pointer over a thumb while dragging another thumb. |
| isRtl | boolean | false | If true the Slider will be rendered right-to-left (with the lowest value on the right-hand side). |
| marks | boolean | Mark[] | false | Marks indicate predetermined values to which the user can move the slider.
If true the marks are spaced according the value of the step prop.
If an array, it should contain objects with value and an optional label keys. |
| 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. |
| name | string | Name attribute of the hidden input element. | |
| onChange | (event: Event, value: number | number[], activeThumb: number) => void | Callback function that is fired when the slider's value changed. | |
| onChangeCommitted | (event: React.SyntheticEvent | Event, value: number | number[]) => void | Callback function that is fired when the mouseup is triggered. | |
| orientation | 'horizontal' | 'vertical' | 'horizontal' | The component orientation. |
| scale | (value: number) => number | function Identity(x) { return x; } | A transformation function, to change the scale of the slider. |
| step | number | null | 1 | The granularity with which the slider can step through values. (A "discrete" slider.)
The min prop serves as the origin for the valid values.
We recommend (max - min) to be evenly divisible by the step.
When step is null, the thumb can only be slid onto marks provided with the marks prop. |
| tabIndex | number | Tab index attribute of the hidden input element. | |
| value | number | number[] | The value of the slider.
For ranged sliders, provide an array with two values. |
Return value
| Name | Type | Default | Description |
|---|---|---|---|
| active | number | -1 | The active index of the slider. |
| axis | Axis | horizontal | The orientation of the slider. |
| axisProps | { [key in Axis]: AxisProps<key> } | Returns the offset and leap methods to calculate the positioning styles based on the slider axis. | |
| dragging | boolean | false | If true, the slider is being dragged. |
| focusedThumbIndex | number | The index of the thumb which is focused on the slider. | |
| getHiddenInputProps | <TOther extends EventHandlers = {}>(otherHandlers?: TOther) => UseSliderHiddenInputProps<TOther> | Resolver for the hidden input slot's props. | |
| getRootProps | <TOther extends EventHandlers = {}>(otherHandlers?: TOther) => UseSliderRootSlotProps<TOther> | Resolver for the root slot's props. | |
| getThumbProps | <TOther extends EventHandlers = {}>(otherHandlers?: TOther) => UseSliderThumbSlotProps<TOther> | Resolver for the thumb slot's props. | |
| marks | Mark[] | The marks of the slider. Marks indicate predetermined values to which the user can move the slider. | |
| open | number | -1 | The thumb index for the current value when in hover state. |
| range | boolean | If true, the slider is a range slider when the value prop passed is an array. | |
| trackLeap | number | The track leap for the current value of the slider. | |
| trackOffset | number | The track offset for the current value of the slider. | |
| values | number[] | The possible values of the slider. |