Instrument readouts and controls
Knob <smart-knob>
Knob is a rotary control for setting a value.
<smart-knob> · 6 properties, 0 methods, 1 events · source/modules/smart.knob.js
Usage in JavaScript
The component is a custom element: its properties are set on the element, its events are DOM CustomEvents with the data in event.detail, and its methods are called on the element. The properties can also be written as attributes in kebab case (precision-digits="1").
const knob = document.querySelector('smart-knob');
knob.knobStyle = 'arc';
knob.addEventListener('change', (event) => console.log(event.detail));
Properties
| Property | Type, default | Description |
|---|---|---|
dragMode | 'circular' | 'vertical' | 'both' | Sets or retrieves how a pointer drag changes the value: vertical - up increases, dragSensitivity pixels covering the full range; circular - turning round the centre turns the knob through the same angle; both - the first few pixels of movement decide which. Either way the drag is relative: it moves the value from where it was, so the press itself writes nothing and a tap without movement is no change. The drag belongs to the primary button of the pointer that started it; a second finger or the right button does nothing.circular follow the pointer round the dialvertical drag up and down, which is precise and works with a fat finger on a touch screenboth the first few pixels of movement decide which, and it stays that way for the rest of the drag - switching mid-drag makes the value jump |
dragSensitivity | number | Sets or gets the number of pixels of vertical drag that cover the full range. A larger value gives a finer adjustment. |
endAngle | number | Sets or gets the angle at which the scale ends, in degrees clockwise from twelve o'clock. The value may exceed 360. |
knobStyle | 'pointer' | 'dot' | 'arc' | Sets or retrieves how the value is marked.pointer a line from the centredot a dot near the rimarc no knob body at all, just the value swept as an arc - which reads at small sizes where a pointer is only a few pixels long |
showValue | boolean | Sets or retrieves whether the value is shown under the dial. Boolean attributes are presence-based, so set the property from script to turn it off. |
startAngle | number | Sets or gets the angle at which the scale starts, in degrees clockwise from twelve o'clock. The default leaves a gap at the bottom, like the stop of a panel knob. |
Events
The data of an event is in event.detail. The knob sets value as the operator turns it and then raises change; the application reads the new value from event.detail. mechanicalAction decides whether change fires while dragging or once on release.
| Event | Description and detail |
|---|---|
change | This event is triggered when the value changes through the pointer or the keyboard. When it fires depends on mechanicalAction: switchWhileDragging reports continuously, switchWhenReleased reports once on release, and switchUntilReleased is momentary: the knob takes the value while it is held and goes back on release. A press without movement changes nothing. A drag that is cancelled - the touch cancelled, the knob disabled, made readonly or removed - raises nothing it had not already reported. A value set by the application during a drag is held until the drag ends and is shown then, unless the drag committed a value of its own; under switchUntilReleased the knob returns to that value.value number The new value. |
Types
type KnobDragMode
'circular' | 'vertical' | 'both'
type KnobKnobStyle
'pointer' | 'dot' | 'arc'
CSS variables
The component declares 5 CSS variables; the CSS page shows how to set them.
--smart-knob-size --smart-knob-track-color --smart-knob-body-color --smart-knob-marker-color --smart-knob-fill-color