GalactrexAccountOriginals
CreativeSynth Knob
Drag, scroll or use the keys; it clicks from step to step with a small kick, and an arc shows how far it is turned. For audio tools, creative apps, settings with feel and game menus.
Install
Included with Creative: needs your API key. Initialize and log in once.
npx @galactrex/ui add synth-knobUsage
import { SynthKnob } from "@/components/galactrex/synth-knob";
<SynthKnob label="Cutoff" min={20} max={20000} step={10} format={(v) => `${v} Hz`} />Source
Installs to components/galactrex/synth-knob.tsx, with the shared motion primitives beside it.
Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | What it controls. |
value / defaultValue | number | — | Controlled or initial value. |
onChange | (value: number) => void | — | Called on every step. |
min, max, step | number | 0, 100, 1 | Range and detent size. |
format | (value: number) => string | — | How the value is written. |
size | number | 72 | Diameter in px. |
className | string | — | Extra classes for the outer element. |
Variants
- Bank. A row of knobs for a mixer or an effect.
- Stepped. A big `step` for a few chunky positions.
Accessibility
- role=slider with value, range and text; arrows, Page Up/Down, Home and End.
- Shift while dragging or scrolling for fine control.
Motion and reduced motion
- The pointer rotates on a stiff spring so each detent kicks slightly.
- Reduced motion: no kick.