<input-knob> ⟳ custom element
A rotating, touch-sensitive knob that you can use like an
dist directory contains the CommonJS module (
input-knob.esm.js) and UMD (
input-knob.umd.js) variants of the
element that you can use directly.
Install via npm and include via the bundler of your choice:
npm install --save input-knob
Include via unpkg:
This will create a knob with a minimum value of zero, a maximum of 100, a current value of 50, and each full turn of the knob will change the value by 10.
value: Current value, this will update as the knob is turned. Optional, defaults to
scale: The change in the value for one full turn. Optional, defaults to
min: Minimum allowed value. Optional, defaults to
max: Maxium allowed value. Optional, defaults.to
max are set, then the knob can be turned multiple times to
reach a different
value. If only one or none of
max is set, then a
full turn of the knob will reset the value to
const knob = document;knobvalue = 42;
Three event types are dispatched for each point in an interaction:
knob-move-start: fired on initial touch or click.
knob-move-change: fired repeatedly for each change in rotation.
knob-move-end: fired when the touch or click is released.
Style and appearance
There are two key parts of the element that can be styled. The
element itself, which is the container for the inner
rotator part. The
rotator is accessed using the
::part(rotator) pseudo-element. The outer
element does not rotate, so can be used for general positioning or changing the
appearance of the outer container. The inner
rotator represents the part of
the knob the user interacts with and will rotate as the
Content inside the
<input-knob> tag will also rotate and can be used to do
things like provide a top marker for the knob.
Try the demo at https://input-knob.glitch.me
For browsers that do not support custom elements, etc. you can use the
For browsers that do not support Shadow Parts, the element will add a fallback
<span> that can by styled.
Issues and pull requests happily received. Please see CONTRIBUTING.md.