Provides state management for a slider component. Stores values for all thumbs, formats values for localization, and provides methods to update the position of any thumbs.

installyarn add react-stately
usageimport {useSliderState} from 'react-stately'


useSliderState<T extends numbernumber[]>( (props: SliderStateOptions<T> )): SliderState



valuesnumber[]Values managed by the slider by thumb index.
focusedThumbnumberundefinedCurrently-focused thumb index.
stepnumberThe step amount for the slider.
pageSizenumberThe page size for the slider, used to do a bigger step.
orientationOrientationThe orientation of the slider.
isDisabledbooleanWhether the slider is disabled.


getThumbValue( (index: number )): numberGet the value for the specified thumb.
setThumbValue( (index: number, , value: number )): void

Sets the value for the specified thumb. The actual value set will be clamped and rounded according to min/max/step.

setThumbPercent( (index: number, , percent: number )): voidSets value for the specified thumb by percent offset (between 0 and 1).
isThumbDragging( (index: number )): booleanWhether the specific thumb is being dragged.
setThumbDragging( (index: number, , dragging: boolean )): voidSet is dragging on the specified thumb.
setFocusedThumb( (index: numberundefined )): void

Set focused true on specified thumb. This will remove focus from any thumb that had it before.

getThumbPercent( (index: number )): numberReturns the specified thumb's value as a percentage from 0 to 1.
getValuePercent( (value: number )): numberReturns the value as a percent between the min and max of the slider.
getThumbValueLabel( (index: number )): stringReturns the string label for the specified thumb's value, per props.formatOptions.
getFormattedValue( (value: number )): stringReturns the string label for the value, per props.formatOptions.
getThumbMinValue( (index: number )): numberReturns the min allowed value for the specified thumb.
getThumbMaxValue( (index: number )): numberReturns the max allowed value for the specified thumb.
getPercentValue( (percent: number )): numberConverts a percent along track (between 0 and 1) to the corresponding value.
isThumbEditable( (index: number )): booleanReturns if the specified thumb is editable.
setThumbEditable( (index: number, , editable: boolean )): voidSet the specified thumb's editable state.
incrementThumb( (index: number, , stepSize?: number )): voidIncrements the value of the thumb by the step or page amount.
decrementThumb( (index: number, , stepSize?: number )): voidDecrements the value of the thumb by the step or page amount.


See the docs for useSlider in react-aria for an example of useSliderState.