Slider

The Slider component provides users with an input for a one or more numerical values within a given range.

useSliderControl API

Import

import { useSliderControl } from '@base_ui/react/Slider';

Parameters

Name	Type	Default	Description
areValuesEqual*	(newValue: number \| ReadonlyArray<number>) => boolean	-	A function that compares a new value with the internal value of the slider. The internal value is potentially unsorted, e.g. to support frozen arrays: https://github.com/mui/material-ui/pull/28472
disabled*	boolean	-
dragging*	boolean	-
getFingerNewValue*	(args: { finger: { x: number; y: number }; move?: boolean; offset?: number; activeIndex?: number }) => { newValue: number \| number[]; activeIndex: number; newPercentageValue: number } \| null	-
handleValueChange*	(value: number \| number[], activeThumb: number, event: React.SyntheticEvent \| Event) => void	-
minStepsBetweenValues*	number	-	The minimum steps between values in a range slider.
percentageValues*	readonly number[]	-	The value(s) of the slider as percentages
registerSliderControl*	(element: HTMLElement \| null) => void	-
setActive*	(activeIndex: number) => void	-
setDragging*	(isDragging: boolean) => void	-
setValueState*	(newValue: number \| number[]) => void	-
step*	number	1	The step increment of the slider when incrementing or decrementing. It will snap to multiples of this value. Decimal values are supported.
subitems*	Map<string, SliderThumbMetadata>	-	A map containing all the Thumb components registered to the slider
onValueCommitted	(value: number \| number[], event: Event) => void	-
rootRef	React.Ref<Element>	-	The ref attached to the control area of the Slider.

Return value

Name	Type	Description
getRootProps	(externalProps?: React.ComponentPropsWithRef<'span'>) => React.ComponentPropsWithRef<'span'>

useSliderIndicator API

Import

import { useSliderIndicator } from '@base_ui/react/Slider';

Parameters

Name	Type	Default	Description
axis*	Axis	-	The orientation of the slider.
direction*	SliderDirection	-
disabled*	boolean	-
orientation*	SliderOrientation	'horizontal'	The component orientation.
percentageValues*	readonly number[]	-	The value(s) of the slider as percentages

Return value

Name	Type	Description
getRootProps	(externalProps?: React.ComponentPropsWithRef<'span'>) => React.ComponentPropsWithRef<'span'>

useSliderOutput API

Import

import { useSliderOutput } from '@base_ui/react/Slider';

Parameters

Name	Type	Description
subitems*	Map<string, SliderThumbMetadata>	A map containing all the Thumb components registered to the slider
aria-live	React.AriaAttributes['aria-live']

Return value

Name	Type	Description
getRootProps	(externalProps?: React.ComponentPropsWithRef<'output'>) => React.ComponentPropsWithRef<'output'>

useSliderRoot API

Import

import { useSliderRoot } from '@base_ui/react/Slider';

This hook does not accept any input parameters.

Return value

Name	Type	Description

useSliderThumb API

Import

import { useSliderThumb } from '@base_ui/react/Slider';

Parameters

Name	Type	Default	Description
active*	number	-	The index of the active thumb.
axis*	Axis	-	The orientation of the slider.
changeValue*	(valueInput: number, index: number, event: React.KeyboardEvent \| React.ChangeEvent) => void	-
direction*	SliderDirection	-
largeStep*	number	10	The large step value of the slider when incrementing or decrementing while the shift key is held, or when using Page-Up or Page-Down keys. Snaps to multiples of this value.
max*	number	-	The maximum allowed value of the slider.
min*	number	-	The minimum allowed value of the slider.
minStepsBetweenValues*	number	-	The minimum steps between values in a range slider.
orientation*	SliderOrientation	'horizontal'	The component orientation.
percentageValues*	readonly number[]	-	The value(s) of the slider as percentages
step*	number	1	The step increment of the slider when incrementing or decrementing. It will snap to multiples of this value. Decimal values are supported.
values*	readonly number[]	-	The value(s) of the slider
aria-label	string	-	The label for the input element.
aria-labelledby	string	-
aria-valuetext	string	-	A string value that provides a user-friendly name for the current value of the slider.
disabled	boolean	-
getAriaLabel	(index: number) => string	-	Accepts a function which returns a string value that provides a user-friendly name for the input associated with the thumb
getAriaValueText	(value: number, index: number) => string	-	Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider. This is important for screen reader users.
id	string	-
name	string	-
onBlur	React.FocusEventHandler	-
onFocus	React.FocusEventHandler	-
onKeyDown	React.KeyboardEventHandler	-
rootRef	React.Ref<Element>	-
tabIndex	number	-

Return value

Name	Type	Description
getRootProps	(externalProps?: React.ComponentPropsWithRef<React.ElementType>) => React.ComponentPropsWithRef<React.ElementType>
getThumbInputProps	(externalProps?: React.ComponentPropsWithRef<'input'>) => React.ComponentPropsWithRef<'input'>
getThumbStyle	(index: number) => Record<string, unknown>	Resolver for the thumb slot's style prop.
index	number