Skip to content
A rotating, touch-sensitive knob web component that you can use like an <input type="range">.
JavaScript
Branch: master
Clone or download
Latest commit bfb3b71 Aug 30, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Apply polyfill properly, support vintage browsers Aug 30, 2019
src
.gitignore Taking things for a spin Aug 21, 2019
CONTRIBUTING.md Taking things for a spin Aug 21, 2019
LICENSE Taking things for a spin Aug 21, 2019
README.md
package-lock.json Add watch, version bump Aug 30, 2019
package.json Release version 0.0.8 Aug 30, 2019
rollup.config.js Enable terser Aug 23, 2019

README.md

<input-knob> ⟳ custom element

A rotating, touch-sensitive knob that you can use like an <input type="range">.

Install

The dist directory contains the CommonJS module (input-knob.cjs.js), ES 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:

<script src="https://unpkg.com/input-knob"></script>

Usage

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.

<input-knob value="50" scale="10" min="0" max="100"></input-knob>
  • value: Current value, this will update as the knob is turned. Optional, defaults to 0.
  • scale: The change in the value for one full turn. Optional, defaults to 1.
  • min: Minimum allowed value. Optional, defaults to null.
  • max: Maxium allowed value. Optional, defaults.to null.

If both min and max are set, then the knob can be turned multiple times to reach a different value. If only one or none of min or max is set, then a full turn of the knob will reset the value to 0.

These are also exposed as properties on the object and can be set or observed in JavaScript:

const knob = document.querySelector('input-knob');
knob.value = 42;

Events

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 <input-knob> 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 value changes.

Content inside the <input-knob> tag will also rotate and can be used to do things like provide a top marker for the knob.

<style>
  input-knob {
    width: 150px;
    padding: 10px;
    border: 2px dashed green;
    background: lightgreen;
  }

  input-knob::part(rotator) {
    box-sizing: border-box;
    background: lightblue;
    border: 2px dashed blue;
    border-radius: 100%;
    width: 150px;
    height: 150px;
  }

  .mark {
    display: inline-block;
    width: 100%;
    text-align: center;
    font: bold 200% monospace;
    color: blue;
  }
</style>

<input-knob value="50" scale="10" min="0" max="100">
  <div class="mark">▲</div>
</input-knob>

A blue knob with an upward tick on a green background

Demo

Try the demo at https://input-knob.glitch.me

An example of <input-knob> in green with an upward tick indicator and slider below

Backwards compatibility

For browsers that do not support custom elements, etc. you can use the webcomponents.js polyfills.

For browsers that do not support Shadow Parts, the element will add a fallback class and <span> that can by styled.

input-knob {
  width: 150px;
  padding: 10px;
  border: 2px dashed green;
  background: lightgreen;
}

input-knob::part(rotator) {
  box-sizing: border-box;
  background: lightblue;
  border: 2px dashed blue;
  border-radius: 100%;
  width: 150px;
  height: 150px;
}

input-knob.fallback > span.fallback {
  display: block;
  box-sizing: border-box;
  background: lightblue;
  border: 2px dashed blue;
  border-radius: 100%;
  width: 150px;
  height: 150px;
}

Contributing

Issues and pull requests happily received. Please see CONTRIBUTING.md.

You can’t perform that action at this time.