Color Slider

<ColorSlider defaultValue="hsl(0, 100%, 50%)">
  <Label>Hue</Label>
  <ColorSliderControl />
</ColorSlider>

Installation

npx shadcn@latest add @dotui/color-slider

Usage

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

import { ColorSlider, ColorSliderControl } from '@/components/ui/color-slider'
import { Label } from '@/components/ui/field'

<ColorSlider defaultValue="#ff0000" channel="hue">
  <Label>Hue</Label>
  <ColorSliderControl />
</ColorSlider>

Anatomy

ColorSlider wraps a ColorSliderControl (the draggable track) and, optionally, a ColorSliderOutput (the current value as text) and a Label. If you render no children, ColorSlider falls back to a bare ColorSliderControl.

import {
  ColorSlider,
  ColorSliderControl,
  ColorSliderOutput,
} from '@/components/ui/color-slider'
import { Label } from '@/components/ui/field'

<ColorSlider>
  <Label />
  <ColorSliderOutput />
  <ColorSliderControl />
</ColorSlider>

Value

The value is a Color object. Use defaultValue for uncontrolled state — it accepts a color string like #f00 or hsl(0, 100%, 50%). For controlled state, pass value + onChange, where value is a parsed Color from parseColor and onChange receives a Color.

import { parseColor } from 'react-aria-components'

const [value, setValue] = React.useState(parseColor('hsl(0, 100%, 50%)'))

<ColorSlider value={value} onChange={setValue} channel="hue">
  <ColorSliderControl />
</ColorSlider>

Use channel to pick which channel the slider edits (hue, saturation, lightness, alpha…), and colorSpace (rgb, hsl, hsb) to interpret the value in a given space.

Examples

API Reference

ColorSlider

ColorSliderControl

ColorSliderOutput