# Sliders


## Anatomy

```tsx
import { ChromaPanel } from "chroma-panel/panel";
import "chroma-panel/sliders";

<ChromaPanel modes={["sliders"]} />;
```

Each row is a [ChannelSlider](/react/components/channel-slider) backed by a real
`<input type="range">`, so keyboard and screen-reader behaviour come from the
browser.

## Mode id

`'sliders'`. List it in `modes` to show the tab, and in the order you want the tabs.