<x-knob> Web Component

View this project on GitHub!

Playaround demo

A 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.

Interactive clock 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.)

The time is

0

hours,

0

minutes,

0

seconds.

Misc. demos

Several small demonstrations trying to showcase specific features or behaviors.

Simplest markup "just works" with some reasonable defaults. It only requires importing xknob.js and xknob.css.

SVG graphics adapting to any size. Also means the click region is precisely the graphic itself, and nothing else.

Attributes disabled and readonly are available, but don't change the look.

A custom SVG graphic can be selected by passing an 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.

Supports 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.

The events bubble correctly:

Optionally snaps the knob to discrete rotations.

CSS transitions work fine together with discrete rotations, but don't look good on a continuous (analog) knob.

Has support for min and max attributes.

All attributes (divisions, min, max, svgsymbolid, value) can be set using standard DOM methods (such as setAttribute()) or directly to the object.

Updating the value of a knob that is being rotated may cause drifting.