/html5-knob

A rotary web input component

Primary LanguageHTMLThe UnlicenseUnlicense

<x-knob> Web Component

<x-knob> is a rotary web input component that can be controlled by dragging and rotating it (with the mouse pointer or touch input).

Open the demo page!

Short demonstration GIF

This component has been created as a proof-of-concept, as a simple base that can be improved upon. It is a more polished version of a previous experiment.

Features:

How to use

Open the demo page and its source-code. Study the demo to understand what this component is capable of.

Is it not enough? Dive into xknob.js and feel free to study how it works, and feel free to modify it to suit your needs. This repository is less like a fully packaged library and more like a starting point to let other people develop more stuff. Be sure to read HTML5 Rocks tutorial on custom elements.

Limitations (AKA known bugs)

The current implementation is not very accessible. It would be great to apply ARIA guidelines.

The current implementation does not support DOM0-style events (e.g. xknob.oninput = function(){} will not work). Using the modern xknob.addEventListener('input') works fine.

This control is not considered a form-associated element, thus its value does not get submitted. A partial solution would be to add <input type="hidden"> as a direct children of <x-knob>; however, I don't know how trigger an update of XKnob whenever the <input type="hidden"> element gets updated (i.e. how to make form.input_name.value = 1 also update XKnob?).

The current implementation lets the element to be focused (by tab-navigation or by clicking) even if it is disabled.

Pseudo-classes such as :disabled do not work on this custom element. Maybe someday? is it even possible to implement that? (Note: :focus already works.)

For some reason, using two fingers to zoom the page will not work if one of the fingers starts the touch on the knob.

Acknowledgements

This code is loosely inspired by KaisarCode Rotate.

The usage of HTML5 custom elements is based on HTML5 Rocks tutorial, found through W3C Wiki.

Mozilla Developer Network proved to be an extremely valuable resource.

Web Components the Right Way is a very comprehensive list of resources related to Web Components.