Touch-enabled Knob Control In Pure JavaScript – Jim Knopf

Preview:

Description:

Jim Knopf is a pure JavaScript library to generating accessible, touch-friendly, SVG based knob/dial controls that can be adjusted by mouse drag, mouse wheel, arrow keys and touch gestures.

How to use it:

Load the minified version of the Jim Knopf library right before the closing body tag.

<script src="dist/knob.min.js"></script>

Create a range input for the knob control. You’re also able to pass the configuration options via data-OPTION attribute as shown below.

<input class="demo" type="range" min="0" max="100"
       data-width="100" 
       data-height="100" 
       data-angleOffset="220"
       data-angleRange="280"
>

Convert the range input to a basic knob control.

Ui.Demo = function() {

};

Ui.Demo.prototype = Object.create(Ui.prototype);

Ui.Demo.prototype.createElement = function() {
  "use strict";
  Ui.prototype.createElement.apply(this, arguments);
  this.addComponent(new Ui.Pointer({
    type: 'Rect',
    pointerWidth: 3,
    pointerHeight: this.width / 5,
    offset: this.width / 2 - this.width / 3.3 - this.width / 10
  }));

  this.addComponent(new Ui.Scale(this.merge(this.options, {
    drawScale: false,
    drawDial: true,
    radius: this.width/2.6})));

  var circle = new Ui.El.Circle(this.width / 3.3, this.width / 2, this.height / 2);
  this.el.node.appendChild(circle.node);
  this.el.node.setAttribute("class", "Demo");
};

Apply your own CSS styles to the knob control.

.Demo rect { fill: #57C7B6; }

.Demo g polygon { opacity: 1; }

.Demo circle {
  fill: #256058;
  stroke: #57C7B6;
  stroke-width: 2;
  filter: url(#dropshadow);
}

.Demo text {
  font-size: 10px;
  fill: #57C7B6;
  font-family: sans-serif;
  font-weight: 300;
  -webkit-transition: all .1s ease-in-out;
}

.Demo text.active {
  font-size: 15px;
  -webkit-transition: all .3s ease-in-out;
}

All default settings.

{
  max: parseFloat(input.max),
  min: parseFloat(input.min),
  step: 1,
  angleoffset: 0,
  anglerange: 360,
  labels: labels
}