ChannelSlider

Anatomy

import { ChannelSlider } from "chroma-panel";
 
<ChannelSlider
  label="Hue"
  min={0}
  max={360}
  read={(c) => c.h}
  write={(h, c) => ({ ...c, h })}
/>;

Keyboard handling and screen-reader announcements come from the browser, because the track is a real <input type="range">.

Only inside a panel

This is one of the parts the built-in modes are made of. It reads the colour through usePanel(), so it only works inside a ChromaPanel — typically in a custom mode. For a picker outside the panel, use the store and hooks.

API reference

Props

Prop	Type	Default	Description
label*	string	—	Accessible name, announced as text — "Hue 210 degrees", not a bare number.
shortLabel	string	—	The letter shown beside the track, such as `H`. Falls back to `label`.
min*	number	—	Lowest value the channel takes.
max*	number	—	Highest value the channel takes.
step	number	1	Arrow-key increment. Shift and Page step by ten.
read*	(color: Hsva) => number	—	Pulls this channel's value out of the current colour.
write*	(value: number, current: Hsva) => Hsva	—	Merges a new value back into the colour. Returning a whole Hsva rather than one channel is what preserves hue at the extremes.
gradient	(color: Hsva) => string	—	Builds the CSS gradient painted behind the track for the current colour. Omit for a plain track.
channel	string	—	Sets `data-cp-channel` on the track, so CSS can target one channel.
formatValue	(value: number) => string	—	Formats the announced value, for units the label cannot carry. Defaults to the rounded number.
className	string	—	Class on the slider row.