Touch-enabled Knob Input With JavaScript – knob-input

Preview:

Description:

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
$ 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>
</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) {
  console.log(evt.target.value);
});

Event handlers.

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

Changelog:

10/11/2018

• v0.2.5