Provides state management for a color slider component. Color sliders allow users to adjust an individual channel of a color value.

installyarn add @react-stately/color
usageimport {useColorSliderState} from '@react-stately/color'


useColorSliderState( (props: ColorSliderStateOptions )): ColorSliderState



valueColorThe current color value represented by the color slider.
valuesnumber[]Values managed by the slider by thumb index.
focusedThumbnumberundefinedCurrently-focused thumb index.
stepnumberThe step amount for the slider.


setValue( (value: stringColor )): voidSets the current color value. If a string is passed, it will be parsed to a Color.
getDisplayColor(): ColorReturns the color that should be displayed in the slider instead of value or the optional parameter.
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 useColorSlider in react-aria for an example of useColorSliderState.