Channel

A colour ramp you can hold. Single values and ranges with inset glass thumbs.

Colour studio

Glass controls, sized to sit beside Swatch.

No committed changes yet Disabled

The Swatch size scale

Each channel is exactly as tall as its neighbouring Swatch. Width remains flexible.

2xs

xs

sm

base

lg

xl

2xl

3xl

4xl

5xl

6xl

7xl

Usage

import { ChannelSlider } from "@patternmode/channel";
import "@patternmode/channel/styles.css";

<ChannelSlider
  label="Lightness"
  background="linear-gradient(to right, #fff, #000)"
  size="xl"
  value={lightness}
  onValueChange={setLightness}
  onValueCommitted={search}
  getThumbColor={(value) => value < 50 ? "#000" : "#fff"}
  labelStart="Lighter"
  labelEnd="Darker"
/>