Color Slider

Gradient slider for one color channel (hue, alpha, lightness, red…).

Import

import { ColorSlider } from '@marbleui/ui'

Props

<ColorSlider>

Prop	Type	Default	Description
label	`ReactNode`	`—`
showValue	`boolean`	`true`

Also accepts React Aria props (90).

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: React Aria ColorSlider · React Aria SliderOutput · React Aria SliderTrack. Follow the primitive's docs for the full keyboard map.

Usage notes

Gradient slider for one color channel such as hue, alpha, red or lightness. For a general number use Slider; for two channels at once use ColorArea.

<ColorSlider label="Hue" channel="hue" defaultValue="hsl(200, 90%, 50%)" />
<ColorSlider aria-label="Opacity" channel="alpha" orientation="vertical" showValue={false} />

channel is required. Uncontrolled: defaultValue. Controlled: value + onChange with a Color. Use colorSpace to pick the model for the channel.
orientation is horizontal by default or vertical; the vertical layout hides the value readout.
Without a visible label, pass aria-label. showValue={false} hides the readout.
A checkerboard is drawn behind the gradient so alpha is visible.

Example source · show

import { ColorSlider } from './color-slider'

export const styles = {
  Hue: () => <ColorSlider label="Hue" channel="hue" defaultValue="hsl(200, 90%, 50%)" />,
  Channels: () => (
    <div className="flex flex-col gap-4">
      <ColorSlider label="Red" channel="red" defaultValue="rgb(220, 90, 60)" />
      <ColorSlider label="Green" channel="green" defaultValue="rgb(220, 90, 60)" />
      <ColorSlider label="Alpha" channel="alpha" defaultValue="rgba(220, 90, 60, 0.6)" />
    </div>
  ),
  Vertical: () => (
    <div className="flex gap-4">
      <ColorSlider aria-label="Hue" orientation="vertical" channel="hue" defaultValue="hsl(30, 90%, 50%)" />
      <ColorSlider aria-label="Lightness" orientation="vertical" channel="lightness" defaultValue="hsl(30, 90%, 50%)" />
    </div>
  ),
}

Source: packages/ui/src/color-slider/color-slider.tsx

Catalog

Category: color
Priority: Core
Primitive: react-aria
React Aria: ColorSlider