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>
</>
);
}
API
<ColorSlider>
<Label />
<SliderOutput />
<SliderTrack>
<ColorThumb />
</SliderTrack>
</ColorSlider>
ColorSlider
A color slider allows users to adjust an individual channel of a color value.
| 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. | ||
children | ChildrenOrFunction | Default: — |
| The children of the component. A function may be provided to alter the children based on component state. | ||
value | T | Default: — |
| The current value (controlled). | ||
defaultValue | T | Default: — |
| The default value (uncontrolled). | ||
onChange | | Default: — |
| Handler that is called when the value changes, as the user drags. | ||
onChangeEnd | | Default: — |
| Handler that is called when the user stops dragging. | ||
Default className: react-aria-ColorSlider
| Render Prop | CSS Selector |
|---|---|
orientation | CSS Selector: [data-orientation="horizontal | vertical"]
|
| The orientation of the color slider. | |
isDisabled | CSS Selector: [data-disabled]
|
| Whether the color slider is disabled. | |
state | CSS Selector: — |
| State of the color slider. | |
ColorThumb
A color thumb appears within a ColorArea, ColorSlider, or ColorWheel and allows a user to drag to adjust the color value.
| Name | Type | |
|---|---|---|
children | ChildrenOrFunction | |
| The children of the component. A function may be provided to alter the children based on component state. | ||
Default className: react-aria-ColorThumb
| Render Prop | CSS Selector |
|---|---|
color | CSS Selector: — |
| The selected color, excluding the alpha channel. | |
isDragging | CSS Selector: [data-dragging]
|
| Whether this thumb is currently being dragged. | |
isHovered | CSS Selector: [data-hovered]
|
| Whether the thumb is currently hovered with a mouse. | |
isFocused | CSS Selector: [data-focused]
|
| Whether the thumb is currently focused. | |
isFocusVisible | CSS Selector: [data-focus-visible]
|
| Whether the thumb is keyboard focused. | |
isDisabled | CSS Selector: [data-disabled]
|
| Whether the thumb is disabled. | |