# Slider

The level control with the onChange/onCommit split: live feel every movement, persist once on release — hardware and API consumers never flood.

Install: `npx candlelight-ds add slider`

Category: primitive · Grammar: G3

## Use when

Setting a level — brightness, volume, temperature, intensity.

## Don't use when

Picking among a few discrete options (SegmentedControl).

## States

- resting
- dragging (live onChange)
- released (onCommit)
- disabled
- spectrum track

## Keyboard

- `←/→` — steps the value
- `Home/End` — min/max

## Acceptance tests

- onChange fires every movement; onCommit exactly once on release.
- Flat two-zone progress paint — no gradient chrome (the spectrum track is content, not chrome).

## Files

- components/ui/Slider.tsx

npm dependencies: @candlelight-ds/tokens, @radix-ui/react-slider, clsx, tailwind-merge

Rendered twin: https://candlelight-docs.vercel.app/components/slider · Full spec: https://candlelight-docs.vercel.app/spec.md