Touch-enabled Knob Input With JavaScript – knob-input

Category: Form , Javascript | October 11, 2018
Views Total:4,146 views
Official Page:Go to website
Last Update:October 11, 2018


Touch-enabled Knob Input With JavaScript – knob-input


knob-input is a vanilla JavaScript library to render accessible, touch-enabled, highly customizable knob/dial controls just like the range input.

Basic usage:

Install the knob-input with NPM:

$ npm install knob-input --save

Or download the zip and insert the CSS and JavaScript files into the document.

<link rel="stylesheet" href="dist/knob-input.css">
<script src="dist/knob-input.js"></script>

Create the html for the knob input.

<div class="knob-input">
  <div class="knob-input__visual"></div>

Initialize the knob input and done.

var myContainer = document.querySelector('.knob-input');
var myKnobInput = new KnobInput(myContainer);

Configuration options with default values.

var myKnobInput = new KnobInput(myKnobContainer,{
    //  The minimum input value.
    min: 0,
    // The maximum input value. 
    max: 1,
    // The step amount for value changes.
    step: '', 
    // The initial value of the input.
    initial: .5,
    // The amount of resistance to value change on mouse/touch drag events.
    dragResistance: 300, 
    // The amount of resistance to value change on mouse wheel scroll. 
    wheelResistance: 4000,
    // Callback that sets minRotation to 0 and maxRotation to 360
    // Callback that allows for customization of the visual context by setting properties via this. 
    // Note that this.element and this.transformProperty will already have values. 
    // Useful for caching DOM references, calculations, etc for use in the updateVisuals callback.
    visualContext: null,
    // Callback that updates visual element rotation based on minRotation/maxRotation  
    // Custom callback for updating the input visuals based on changes to the input value. 
    // Has access to the visual context via this (e.g. this.element).
    updateVisuals: null

API methods.

// retrieves current value
var currentValue = myKnobInput;
// sets a new value
myKnobInput.value = 0.5;
// watches for changes
myKnobInput.addEventListener('change', function(evt) {

Event handlers.

myKnobInput.addEventListener('change', function(evt) {
  console.log('I changed value:',;
myKnobInput.addEventListener('focus', function(evt) {
  console.log('I now have keyboard focus');
myKnobInput.addEventListener('blur', function(evt) {
  console.log('I lost keyboard focus');



  • v0.2.5

You Might Be Interested In:

Leave a Reply