ColorSlider

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

Hue0°

label

colorSpace

channel

orientation

isDisabled

Example

ColorSlider.tsx

ColorSlider.css

Example

ColorSlider.tsx

ColorSlider.css

import {ColorSlider} from './ColorSlider';

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

Hue50°

onChange value: #FFD400
onChangeEnd value: #FFD400

import {parseColor} from 'react-aria-components';
import {ColorSlider} from './ColorSlider';
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>
    </>
  );
}

ColorSlider

Value

API