1. Components
  2. Colors
  3. Color Slider

Color Slider

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

Aria docsAria API ReferenceReport an issueEdit this page
200°
<ColorSlider channel="hue" defaultValue="hsl(200, 100%, 50%)" />

Installation

npx dotui-cli@latest add color-slider

Usage

Use ColorSlider to allow users to adjust an individual channel of a color value.

Options

Label

Use the label prop to provide a label for the color slider.

200°
<ColorSlider label="Hue" channel="hue" defaultValue="hsl(200, 100%, 50%)" />

Orientation

orientation prop may be provided to specify the orientation of the color slider.

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

Channel

channel prop may be provided to specify which color channel the color slider should display

100%
<ColorSlider label="Opacity" defaultValue="#f00" channel="alpha" />

Disabled

Use the isDisabled prop to disable the color slider.

100%
<ColorSlider label="Opacity" defaultValue="#f00" channel="alpha" isDisabled />

Unontrolled

Use the value and onChange props to control the value of the slider.

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

Controlled

Use the value and onChange props to control the value of the slider.

0°

Value: #FF0000

const [value, setValue] = React.useState(parseColor("hsl(0, 100%, 50%)"));
return <ColorSlider value={value} onChange={setValue} channel="hue" />

Composition

If you need to customize things further, you can drop down to the composition level.

0°
<ColorSliderRoot channel="hue" defaultValue="hsl(0, 100%, 50%)">
  <Label>Hue</Label>
  <ColorSliderOutput />
  <ColorSliderTrack>
    <ColorThumb />
  </ColorSliderTrack>
</ColorSliderRoot>

API Reference

PropTypeDefaultDescription
channel*
'hue' | 'saturation' | 'brightness' | 'lightness' | 'red' | 'green' | 'blue' | 'alpha'
-
The color channel that the slider manipulates.
colorSpace
'rgb' | 'hsl' | 'hsb'
-
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.
orientation
'horizontal' | 'vertical'
'horizontal'
The orientation of the Slider.
isDisabled
boolean
-
Whether the whole Slider is disabled.
value
T
-
The current value (controlled).
defaultValue
T
-
The default value (uncontrolled).
name
string
-
The name of the input element, used when submitting an HTML form.
children
ReactNode | (values: ColorSliderRenderProps & {defaultChildren: ReactNode | undefined}) => ReactNode
-
The children of the component. A function may be provided to alter the children based on component state.
className
string
-
The CSS className for the element.
style
CSSProperties | (values: ColorSliderRenderProps & {defaultStyle: CSSProperties}) => CSSProperties
-
The inline style for the element. A function may be provided to compute the style based on component state.
EventTypeDescription
onChange
(value: Color) => void
Handler that is called when the value changes, as the user drags.
onChangeEnd
(value: Color) => void
Handler that is called when the user stops dragging.
Data attributeDescription
[data-orientation="horizontal | vertical"]
The orientation of the color slider.
[data-disabled]
Whether the color slider is disabled.

Accessibility

Keyboard interactions

KeyDescription
Tab
Places focus on the handle. If the handle is already in focus, moves focus to the next handle or next element in the page tab sequence.
Shift+Tab
Places focus on the previous handle or previous element in the page tab sequence.
ArrowUp ArrowDown ArrowLeft ArrowRight
Moves the handle up/down/left/right.

Last updated on 10/11/2024

Color FieldColor Swatch