Knob

Knob is a pixel ring with an ink pointer over a native range input, for tuning panels. Drag up or right to turn it up; the arrow keys, Page Up/Down, Home and End work too, and screen readers read it as a slider. 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 { Knob } from "@/components/dithercharts/knob"

<Knob label="Gain" name="gain" defaultValue={60} onValueChange={(gain) => setGain(gain)} />
<Knob label="Dither" min={0} max={1} step={0.05} defaultValue={0.5} />

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 knob

Props

It renders a native element, so every other attribute that element takes passes through.