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/slider
usageimport {useSliderState} from '@react-stately/slider'


useSliderState( (props: SliderStateOptions )): SliderState



valuesnumber[]Values managed by the slider by thumb index.
focusedThumbnumberundefinedCurrently-focused thumb index.
stepnumberThe step amount for the slider.


getThumbValue( (index: number )): numberGet the value for the specified thumb.
setThumbValue( (index: number, , value: number )): voidSets 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 )): voidSet 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.


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