ColorSlider
A color slider allows users to adjust an individual channel of a color value.
Vanilla CSS theme
This sets the
--tint CSS variable used by the Vanilla CSS examples.Theme
colorSpace
channel
The color channel that the slider manipulates.
channel
orientation
isDisabled
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.
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>
</>
);
}