1. Components
  2. Colors
  3. Color Slider

Color Slider

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

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

Installation

npx dotui-cli@latest add color-slider

Anatomy

import { ColorSlider } from "@/components/core/color-slider";
 
<ColorSlider label="Hue" channel="hue" defaultValue="#fff" />;
import {
  ColorSliderRoot,
  ColorSliderControl,
  ColorSliderOutput,
} from "@/components/dynamic-core/color-slider";
import { Label } from "@/components/dynamic-core/field";
 
<ColorSliderRoot defaultValue="#fff">
  <div className="flex items-center justify-between">
    <Label>Hue</Label>
    <ColorSliderOutput />
  </div>
  <ColorSliderControl />
</ColorSliderRoot>;

Controlled

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

Value: #FF0000

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

Label

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

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

Channel

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

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

Options

Orientation

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

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

Disabled

Use the isDisabled prop to disable the color slider.

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

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%)">
  <div className="flex items-center justify-between">
    <Label>Hue</Label>
    <ColorSliderOutput />
  </div>
  <ColorSliderControl />
</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.
isDisabledboolean-Whether the whole Slider is disabled.
valueT-The current value (controlled).
defaultValueT-The default value (uncontrolled).
namestring-The name of the input element, used when submitting an HTML form.
childrenReactNode | (values: ColorSliderRenderProps & {defaultChildren: ReactNode | undefined}) => ReactNode-The children of the component. A function may be provided to alter the children based on component state.
classNamestring-The CSS className for the element.
styleCSSProperties | (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) => voidHandler that is called when the value changes, as the user drags.
onChangeEnd(value: Color) => voidHandler 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
TabPlaces 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+TabPlaces focus on the previous handle or previous element in the page tab sequence.
ArrowUp ArrowDown ArrowLeft ArrowRightMoves the handle up/down/left/right.

Last updated on 10/11/2024

Color FieldColor Swatch
dotUI

Bringing singularity to the web.

Community

Built by mehdibha. The source code is available on GitHub.