Slider
Updated
Slider is a native range input over a dithered track. The track fills with ink up to the thumb and fades out through a Bayer ramp, and the value shows beside the label. Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.
Example
import "@/components/dithercharts/controls.css"
import { Slider } from "@/components/dithercharts/slider"
<Slider label="Opacity" defaultValue={40} />
<Slider label="Cell size" min={1} max={8} defaultValue={3} />
<Slider label="Locked" defaultValue={70} disabled />Install
Controls install with DitherCharts Pro. See Installation to log in, then import controls.css once, e.g. in your root layout.
npx dithercharts add slider
Props
It renders a native element, so every other attribute that element takes passes through.
| Prop | Type | Default | Description |
|---|---|---|---|
| labelrequired | Type ReactNode | Default – | The caption above the track, and the slider's accessible name. |
| hideLabel | Type boolean | Default false | Keeps the label for screen readers only, e.g. when a row caption sits beside the track; the value hides with it. |
| showValue | Type boolean | Default true | Shows the current value beside the label. |
| onValueChange | Type (value: number) => void | Default – | Called with the new value as the thumb moves. |