Slider

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

useSlider API

Import

import { useSlider } from '@mui/base/useSlider';
// or
import { useSlider } from '@mui/base';

Learn about the difference by reading this guide on minimizing bundle size.

Parameters

Name	Type	Default	Description
aria-labelledby	string	-	The id of the element containing a label for the slider.
defaultValue	number \| ReadonlyArray<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 \| ReadonlyArray<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.
rootRef	React.Ref<Element>	-	The ref attached to the root of the Slider.
scale	(value: number) => number	function Identity(x) { return x; }	A transformation function, to change the scale of the slider.
shiftStep	number	10	The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down.
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 \| ReadonlyArray<number>	-	The value of the slider. For ranged sliders, provide an array with two values.

Return value

Name	Type	Default	Description
active	number	-	The active index of the slider.
axis	Axis	-	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	-	If `true`, the slider is being dragged.
focusedThumbIndex	number	-	The index of the thumb which is focused on the slider.
getHiddenInputProps	<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseSliderHiddenInputProps<ExternalProps>	-	Resolver for the hidden input slot's props.
getRootProps	<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseSliderRootSlotProps<ExternalProps>	-	Resolver for the root slot's props.
getThumbProps	<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseSliderThumbSlotProps<ExternalProps>	-	Resolver for the thumb slot's props.
getThumbStyle	(index: number) => object	-	Resolver for the thumb slot's style prop.
marks	Mark[]	-	The marks of the slider. Marks indicate predetermined values to which the user can move the slider.
open	number	-	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.
rootRef	React.RefCallback<Element> \| null	-	Ref to the root slot's DOM node.
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.