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
usageimport {useColorSliderState} from 'react-stately'


useColorSliderState( (props: ColorSliderStateOptions )): ColorSliderState



valueColorThe current color value represented by the color slider.
isDraggingbooleanWhether the color slider is currently being dragged.
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.


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 )): 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 useColorSlider in react-aria for an example of useColorSliderState.