Chroma Panel

Search documentation

Find a page or section

Every channel as its own slider, in whichever model you work in.

Anatomy

import { ChromaPanel } from "chroma-panel/panel";
import "chroma-panel/sliders";
 
<ChromaPanel modes={["sliders"]} />;

Each row is a ChannelSlider 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.