<x-knob>
Web ComponentA demo with a single <x-knob>
element with all attributes exposed. It's easy to get a feel on how it works by just interacting with this demo.
|
||
A more realistic and complex demonstration. Click/touch each clock hand and drag them around. The clock graphic is from "SVG Railway Station Clock" by RĂ¼diger Appel. Each hand is a <x-knob>
element. (Known issue: the event handlers written for this demo make it impossible to change the hours hand by keyboard.)
Several small demonstrations trying to showcase specific features or behaviors.
xknob.js
and xknob.css
.
disabled
and readonly
are available, but don't change the look.
id
of an SVG <symbol>
available from within the same document. The symbol will be (deep-)copied into the shadow DOM of the x-knob
element. Symbols from external files are not supported.
input
event (value = ) and change
event (value = ). The change
event is triggered if the value has changed after the mouse button is released, after the touch has ended, or after a keyboard press. The input
event is triggered immediately.
min
and max
attributes.
divisions
, min
, max
, svgsymbolid
, value
) can be set using standard DOM methods (such as setAttribute()
) or directly to the object.
value
of a knob that is being rotated may cause drifting.