Detent Dial
A rotary control you count by feel. The value sticks at each notch and clicks over, and the light stays where the lamp is. Not a slider in a round costume.
What it is for
Set a value by turning, where a slider would lose the sense of travel: levels, gain, selectors, set points.
Everything you set here is what the Code and Prompt tabs give you.
Seats open in 11 days. Want one email that morning?
Datasheet
- Mechanism
- Rotary input, Angle unwrapping, Magnetic detents, Fixed lighting, Keyboard slider, Tap to set scale
- Stack
- Vanilla ES modules, CSS, Canvas 2D
- Needs
- Nothing, no dependencies
- States
- 12 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- IdleThe knob rests at its value; the scale fills to it and every passed detent takes the accent.
- DraggingAngular drag with unwrapping, vertical travel near the centre, Shift for a fifth of the speed; the knob follows a magnetised position between notches.
- Tap on the scaleA click or tap on the printed scale or the LED ring, with no drag, sets the value at that angle and the knob travels there on its usual settle. A tap within reach of a detent lands on it (on a printed 60 it is 60, not 61); with snap on it always lands on the nearest detent. The open throat below the scale takes no tap, and the knob keeps focus for the keys.
- SettlingOn release the knob settles onto the landed value; reduced motion removes the flight and keeps the value.
- SnappingWith snap on, the value only ever lands on a detent: a selector rather than a level.
- At an endHome and End reach the limits; nothing, including a drag past the stop, moves beyond them.
- DisabledPointer, scale taps, keys and wheel are ignored and the dial leaves the tab order.
- AsleepOnce the knob has settled nothing is drawn: no frame is requested, and the loop also pauses off screen and in a hidden tab.
- LED ringAn optional lit arc around the collar shows the value from its start to the pointer, in the signal colour, drawn with the rest of the knob.
- MaterialsTen, all lit by the same lamp: spun aluminium, anodised graphite, turned brass, glazed bone, glazed porcelain, black anodised, bead-blasted titanium, Bakelite, and anodised blue and green, whose cut chamfer shows bare metal. Auto follows the page's finish and never picks the last six; they are chosen by name.
- Caption placementThe value readout can sit below, above, inside the open bottom of the scale, or be hidden while still announced as the slider value text.
- Reduced motionThe knob lands on each value with no flight or settle: the value, the detents, the keys, the drag and the scale tap all stay; only the travel between positions goes.
Notes
Built for both hands on a pointer and hands on a keyboard.
Original. Informed by physical detented potentiometers rather than by a catalogue reference, so references is honestly empty. The click is synthesised with Web Audio; no audio file ships.
Anatomy
Rotary input, Angle unwrapping, Magnetic detents, Fixed lighting, Keyboard slider, Tap to set scale
Usage notes
Set a value by turning, where a slider would lose the sense of travel: levels, gain, selectors, set points. Built for both hands on a pointer and hands on a keyboard.
Options
| Option | Type | Description |
|---|---|---|
| range | enum | Four jobs for one knob: a level, a gain in decibels, an eight-way selector, a thermostat. |
| position | number | How far through the range. Turning the dial in the preview writes here too. |
| detents | number | Felt notches across the sweep, ends included. 0 is a smooth dial. |
| snap | boolean | A selector rather than a level. |
| strength | number | How hard each notch holds before the knob clicks over. |
| sweep | number | Sweep (degrees) |
| finish | enum | Auto follows the page: spun aluminium or glazed bone on a light finish; on Graphite, Black, Phosphor and Night, made in that finish’s own light (anodised metal with bright cut edges, black glass traced in a display’s glow, dim metal lit from inside). Or pin one: spun aluminium, turned brass, anodised graphite with a diamond-cut chamfer, glazed bone ceramic, glazed porcelain, black anodised, bead-blasted titanium, Bakelite, or anodised blue or green. Auto never picks the last six. |
| light | number | 0 is from above, clockwise. The spun band, the glints on the grip, the engraving and the shadow all follow it. |
| size | number | Numerals and minor ticks appear when there is room for them. |
| numerals | enum | The detent values, or 0, 1, 2… the way a hardware knob is marked. |
| caption | enum | Label and value under the dial, above it, set into the open throat of the scale, or hidden (still named for assistive technology). |
| led | boolean | |
| label | text | The accessible name. Leave empty to use the range’s own name, so it is never blank and never wrong. |
| drag | enum | Rotary follows the pointer round; vertical is the audio-plugin convention. |
| readout | boolean | Show value |
| ticks | boolean | Show scale |
| sound | boolean | Synthesised, no audio file. Starts only after you touch the dial. |
| haptics | boolean | Where the device supports it. |
| disabled | boolean | Disabled |
Methods
- value
- set
- update
- destroy
How it works
Original. The click is synthesised with Web Audio; no audio file ships.