A compact parameter
Effect inspector
35 %
Drag horizontally or use the arrow keys to adjust.
Parameter knob
Displays a rotary parameter over a native horizontal range input, with named values, units, and a 64px control.
Preview
35 %
In action
When to use
Use it for
- A compact bounded parameter with an explicit label, step, and unit.
- value/defaultValue/onValueChange and native form attributes; the ref reaches the range input.
- Horizontal pointer movement and the browser's native range keyboard behavior.
Not for
- Implying circular pointer dragging; the dial is a visual representation of a horizontal range.
- Non-finite values or invalid bounds; they render an unavailable disabled control.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { ParameterKnob } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/parameter-knob.
2. Vendor the source
npx @noorddev/vlak-cli add parameter-knob
The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/parameter-knob.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { ParameterKnob } from "@noorddev/vlak-react";
<ParameterKnob label="Mix" name="mix" min={0} max={100} step={1} defaultValue={35} unit="%" />Props
ParameterKnob
A rotary display driven by a native horizontal range input.
| Prop | Type | Default | Description |
|---|---|---|---|
labelrequired | ReactNode | ||
value | number | ||
defaultValue | number | ||
onValueChange | (value: number) => void | ||
min | number | 0 | |
max | number | 100 | |
step | number | 1 | |
unit | string |
Also accepts Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange" | "min" | "max" | "step">.
Keyboard
| Keys | Does |
|---|---|
| Tab | Focuses the native range input and its visible dial ring. |
| Arrow keys, Home, End | Uses native range stepping and bounds unless read-only. |
Accessibility
- The native range uses the visible label and exposes min, max, step, and value text including the unit.
- The full 64px dial is the input target; the pointer graphic is decorative.
- Form reset restores uncontrolled defaults and preserves controlled values.
- The ref, native input attributes, className, and style reach the range input.
Markup
<div class="rs-parameter-knob"><label class="rs-parameter-knob-label" for="mix-knob">Mix</label><div class="rs-parameter-knob-control"><span class="rs-parameter-knob-pointer" aria-hidden="true" style="transform:rotate(0deg)"></span><input class="rs-parameter-knob-input" id="mix-knob" type="range" min="0" max="100" step="1" value="50" aria-valuetext="50%" /></div><span class="rs-parameter-knob-value">50%</span></div>
Classes
.rs-parameter-knob.rs-parameter-knob-label.rs-parameter-knob-control.rs-parameter-knob-pointer.rs-parameter-knob-input.rs-parameter-knob-value