• 

• GIF

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

This component has been created as a proof-of-concept, as a simple base that can be improved upon.

Features:

• Pure JavaScript code, no libraries used.
• Customizable graphics using SVG.
• Supports mouse input and touch input.
  • But does not support multiple fingers.
• Uses cutting-edge technology: HTML5 Web Components with Shadow DOM and Custom element.
  • Works on Google Chrome and Opera.
  • Does not work on Firefox, Safari, IE, Edge.
  • Using webcomponentsjs as a set of polyfills and adding shim-shadowdom to the CSS improves the compatibility and makes it work correctly on Firefox. Unsure about other browsers.
• Most likely not production-ready!
  • Unless the incompatibilities and limitations can be ignored.
• Excellent example for learning the new web technologies.

Built With

• css
• html
• html5
• javascript
• svg