ColorSlider

A ColorSlider allows users to adjust an individual channel of a color value.

Hue

0°

label

colorSpace

channel

orientation

contextualHelp

isDisabled

import {ColorSlider} from '@react-spectrum/s2';

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

Value

Use the value or defaultValue prop to set the color value, and the channel prop to specify which color channel to display. The value may be a string or Color object, parsed using the parseColor function.

The onChange event is called as the user drags, and onChangeEnd is called when the thumb is released. These are always called with a Color object.

Hue

50°

onChange value: #FFD400
onChangeEnd value: #FFD400

import {ColorSlider, parseColor} from '@react-spectrum/s2';
import {useState} from 'react';

function Example() {
  let [currentValue, setCurrentValue] = useState(parseColor('hsl(50, 100%, 50%)'));
  let [finalValue, setFinalValue] = useState(currentValue);

  return (
    <>
      <ColorSlider
        channel="hue"
        value={currentValue}
        onChange={setCurrentValue}
        onChangeEnd={setFinalValue} />
      <pre style={{fontSize: 12}}>
        onChange value: {currentValue.toString('hex')}{'\n'}
        onChangeEnd value: {finalValue.toString('hex')}
      </pre>
    </>
  );
}

API

Name	Type	Default
`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.
`styles`	`StylesProp`	Default: —
Spectrum-defined styles, returned by the `style()` macro.

`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.