alpha

useColorSlider

install	`yarn add @react-aria/color`
version	3.0.0-alpha.1
usage	`import {useColorSlider} from '@react-aria/color'`

View ARIA spec

W3C

API#

useColorSlider(
  (props: ColorSliderAriaOptions,
  , state: ColorSliderState
)): ColorSliderAria

Features#

Name	Type	Default	Description
`channel`	`ColorChannel`	—
`trackRef`	`RefObject<HTMLElement>`	—
`inputRef`	`RefObject<HTMLInputElement>`	—
`orientation`	`Orientation`	`'horizontal'`	The orientation of the Slider.
`isDisabled`	`boolean`	—	Whether the Thumb is disabled.
`autoFocus`	`boolean`	—	Whether the element should receive focus on render.
`onFocus`	`( (e: FocusEvent )) => void`	—	Handler that is called when the element receives focus.
`onBlur`	`( (e: FocusEvent )) => void`	—	Handler that is called when the element loses focus.
`onFocusChange`	`( (isFocused: boolean )) => void`	—	Handler that is called when the element's focus status changes.
`onKeyDown`	`( (e: KeyboardEvent )) => void`	—	Handler that is called when a key is pressed.
`onKeyUp`	`( (e: KeyboardEvent )) => void`	—	Handler that is called when a key is released.
`validationState`	`ValidationState`	—	Whether the input should display its "valid" or "invalid" visual styling.
`isRequired`	`boolean`	—	Whether user input is required on the input before form submission. Often paired with the `necessityIndicator` prop to add a visual indicator to the input.
`label`	`ReactNode`	—	The content to display as the label.
`id`	`string`	—	The element's unique identifier. See MDN.
`excludeFromTabOrder`	`boolean`	—	Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available.
`aria-label`	`string`	—	Defines a string value that labels the current element.
`aria-labelledby`	`string`	—	Identifies the element (or elements) that labels the current element.
`aria-describedby`	`string`	—	Identifies the element (or elements) that describes the object.
`aria-details`	`string`	—	Identifies the element (or elements) that provide a detailed, extended description for the object.
`aria-errormessage`	`string`	—	Identifies the element that provides an error message for the object.

A list of color channels.

'hue'
  | 'saturation'
  | 'brightness'
  | 'lightness'
  | 'red'
  | 'green'
  | 'blue'
  | 'alpha'

'horizontal' | 'vertical'

BaseEvent<ReactKeyboardEvent<any>>

T & {stopPropagation: () => void,
continuePropagation: () => void
}

'valid' | 'invalid'

Properties

Name	Type	Description
`value`	`Color`
`values`	`number[]`	Values managed by the slider by thumb index.
`focusedThumb`	`number \| undefined`	Currently-focused thumb index.
`step`	`number`	The step amount for the slider.

Methods

Method	Description
`setValue( (value: string \| \| Color )): void`
`getDisplayColor( (c: Color )): 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 )): 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.

Method	Description
`toFormat( (format: ColorFormat )): Color`
`toHexInt(): number`
`getChannelValue( (channel: ColorChannel )): number`
`withChannelValue( (channel: ColorChannel, , value: number )): Color`

A list of supported color formats.

'hex'
  | 'hexa'
  | 'rgb'
  | 'rgba'
  | 'hsl'
  | 'hsla'
  | 'hsb'
  | 'hsba'

Name	Type	Description
`groupProps`	`HTMLAttributes<HTMLElement>`
`trackProps`	`HTMLAttributes<HTMLElement>`
`inputProps`	`HTMLAttributes<HTMLElement>`
`thumbProps`	`HTMLAttributes<HTMLElement>`
`labelProps`	`HTMLAttributes<HTMLElement>`
`outputProps`	`HTMLAttributes<HTMLElement>`
`gradientProps`	`HTMLAttributes<HTMLElement>`