# ChannelSlider


## Anatomy

```tsx
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">`.

<Callout variant="note" title="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](/react/modes/custom). For a picker outside the panel, use [the
  store and hooks](/react/utils/use-color-store).
</Callout>

## API reference

### Props

<PropsTable name="ChannelSlider" />