useColorSlider

Provides the behavior and accessibility implementation for a color slider component. Color sliders allow users to adjust an individual channel of a color value.

Hue0°

Example

ColorSlider.tsx

ColorSlider.css

ColorThumb.css

Example

ColorSlider.tsx

ColorSlider.css

ColorThumb.css

import {ColorSlider} from './ColorSlider';

<ColorSlider channel="hue" defaultValue="hsl(0, 100%, 50%)" />

API

<ColorSlider>
  <Label />
  <SliderOutput />
  <SliderTrack>
    <ColorThumb />
  </SliderTrack>
</ColorSlider>

useColorSliderState(props: ColorSliderStateOptions): ColorSliderStateuseColorSlider(props: AriaColorSliderOptions, state: ColorSliderState): ColorSliderAria

ColorSliderState

Properties

Name	Type
`value`	`Color`
The current color value represented by the color slider.
`isDragging`	`boolean`
Whether the color slider is currently being dragged.
`values`	`number[]`
Values managed by the slider by thumb index.
`defaultValues`	`number[]`
The default values for each thumb.
`focusedThumb`	`number \| undefined`
Currently-focused thumb index.
`pageSize`	`number`
The page size for the slider, used to do a bigger step.
`orientation`	`Orientation`
The orientation of the slider.
`isDisabled`	`boolean`
Whether the slider is disabled.

Methods

`setValue(value: string \| Color): void`
Sets the current color value. If a string is passed, it will be parsed to a Color.
`getDisplayColor(): Color`
Returns the color that should be displayed in the slider instead of `value` or the optional parameter.
`getThumbValue(index: number): number`
Get 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): void`
Sets value for the specified thumb by percent offset (between 0 and 1).
`isThumbDragging(index: number): boolean`
Whether the specific thumb is being dragged.
`setThumbDragging(index: number, dragging: boolean): void`
Set is dragging on the specified thumb.
`setFocusedThumb(index: number \| undefined): void`
Set focused true on specified thumb. This will remove focus from any thumb that had it before.
`getThumbPercent(index: number): number`
Returns the specified thumb's value as a percentage from 0 to 1.
`getValuePercent(value: number): number`
Returns the value as a percent between the min and max of the slider.
`getThumbValueLabel(index: number): string`
Returns the string label for the specified thumb's value, per props.formatOptions.
`getFormattedValue(value?: number \| number[]): string`
Returns the string label for the value, per props.formatOptions.
`getThumbMinValue(index: number): number`
Returns the min allowed value for the specified thumb.
`getThumbMaxValue(index: number): number`
Returns the max allowed value for the specified thumb.
`getPercentValue(percent: number): number`
Converts a percent along track (between 0 and 1) to the corresponding value.
`isThumbEditable(index: number): boolean`
Returns if the specified thumb is editable.
`setThumbEditable(index: number, editable: boolean): void`
Set the specified thumb's editable state.
`incrementThumb(index: number, stepSize?: number): void`
Increments the value of the thumb by the step or page amount.
`decrementThumb(index: number, stepSize?: number): void`
Decrements the value of the thumb by the step or page amount.

AriaColorSliderOptions

Name	Type	Default
`trackRef`	`RefObject<Element \| null>`	Default: —
A ref for the track element.
`inputRef`	`RefObject<HTMLInputElement \| null>`	Default: —
A ref for the input element.
`colorSpace`	`ColorSpace`	Default: —
The color space that the slider operates in. The `channel` must be in this color space. If not provided, this defaults to the color space of the `color` or `defaultColor` value.
`channel`	`ColorChannel`	Default: —
The color channel that the slider manipulates.
`orientation`	`Orientation`	Default: `'horizontal'`
The orientation of the Slider.
`isDisabled`	`boolean`	Default: —
Whether the whole Slider is disabled.

`value`	`T`	Default: —
The current value (controlled).
`defaultValue`	`T`	Default: —
The default value (uncontrolled).
`onChange`	`(value: Color) => void`	Default: —
Handler that is called when the value changes, as the user drags.
`onChangeEnd`	`(value: Color) => void`	Default: —
Handler that is called when the user stops dragging.

ColorSliderAria

Name	Type
`labelProps`	`DOMAttributes`
Props for the label element.
`trackProps`	`DOMAttributes`
Props for the track element.
`thumbProps`	`DOMAttributes`
Props for the thumb element.
`inputProps`	`InputHTMLAttributes<HTMLInputElement>`
Props for the visually hidden range input element.
`outputProps`	`DOMAttributes`
Props for the output element, displaying the value of the color slider.