ColorSlider

A slider for adjusting a single color channel such as hue, saturation, or lightness.

Hue

Prop	Type	Default	Description
`channel`	`"hue" \| "saturation" \| "lightness"`	—	The color channel this slider controls.
`value`	`number`	—	The current value (controlled).
`defaultValue`	`number`	—	The initial value (uncontrolled).
`onValueChange`	`(value: number) => void`	—	Called when the value changes.
`--mantle-bg`	`CSS variable`	`theme default`	Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}
`--mantle-border`	`CSS variable`	`theme default`	Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}
`--mantle-text`	`CSS variable`	`theme default`	Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}
`--mantle-ring`	`CSS variable`	`accent`	Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}

channel

"hue" | "saturation" | "lightness"

The color channel this slider controls.

value

number

The current value (controlled).

defaultValue

number

The initial value (uncontrolled).

onValueChange

(value: number) => void

Called when the value changes.

--mantle-bgtheme default

CSS variable

Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}

--mantle-bordertheme default

CSS variable

Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}

--mantle-texttheme default

CSS variable

Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}

--mantle-ringaccent

CSS variable

Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}