Knob
A rotary knob input rendered as an SVG circular dial with a track arc and a value arc, supporting drag, wheel, and keyboard interactions.
Preview
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
value | number | — | Current knob value |
min | number | 0 | Minimum value |
max | number | 100 | Maximum value |
step | number | 1 | Step increment for value changes |
size | number | 100 | Diameter of the knob in pixels |
stroke-width | number | — | SVG stroke width for the arcs |
readonly | boolean | — | Prevent interaction while keeping the knob visible |
disabled | boolean | — | Disable interaction and remove from tab order |
value-template | string | — | Template string for center readout, use {value} as placeholder |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/knob.js"></script>import "./pura/lib/knob.js";