Skip to content


A slider is a UI element that lets users select a single value or a range of values along a bar.

useSlider API


import useSlider from '@mui/base/useSlider';
// or
import { useSlider } from '@mui/base';
You can learn about the difference by reading this guide on minimizing bundle size.


The id of the element containing a label for the slider.
defaultValuenumber | number[]
The default value. Use when the component is not controlled.
If true, the component is disabled.
If true, the active thumb doesn't swap when moving pointer over a thumb while dragging another thumb.
If true the Slider will be rendered right-to-left (with the lowest value on the right-hand side).
marksboolean | 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.
The maximum allowed value of the slider. Should not be equal to min.
The minimum allowed value of the slider. Should not be equal to max.
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.
The ref attached to the root of the Slider.
scale(value: number) => numberfunction Identity(x) { return x; }
A transformation function, to change the scale of the slider.
stepnumber | null1
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.
Tab index attribute of the hidden input element.
valuenumber | number[]
The value of the slider. For ranged sliders, provide an array with two values.

Return value

The active index of the slider.
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.
If true, the slider is being dragged.
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.
The marks of the slider. Marks indicate predetermined values to which the user can move the slider.
The thumb index for the current value when in hover state.
If true, the slider is a range slider when the value prop passed is an array.
rootRefReact.RefCallback<Element> | null
Ref to the root slot's DOM node.
The track leap for the current value of the slider.
The track offset for the current value of the slider.
The possible values of the slider.