Mobile-friendly Dial Knob Plugin In Vanilla JS – JogDial.js

The JogDial.js JavaScript plugin helps you create a customizable, mobile-friendly knob control where the users are able to adjust values by cyclic dragging with mouse or fingers.

How to use it:

Download and load the JogDial plugin’s files into the document.

<script src="jogDial.js"></script>

Create a container to place the knob.

<div id="example"></div>

Initialize the JogDial.

var dial = JogDial(document.getElementById('example')

The example CSS to style the knob control.

#example {
  width: 200px;
  height: 200px;
  background: url('bg.png');
  background-repeat: none;
}
#knob {
  background: url('knob.png');
}

Customize the knob control with the following parameters:

var dial = JogDial(document.getElementById('jog_dial_example'),{
    debug : false,
    touchMode : 'knob',  // knob | wheel 
    knobSize : '30%',
    wheelSize : '100%',
    zIndex : 9999,
    degreeStartAt : 0,
    minDegree : null,  // (null) infinity
    maxDegree : null   // (null) infinity
}

Event handlers.

addEventListener("mousemove", function(evt){
  // on move
  // event.target.rotation
});
addEventListener("mousedown", function(evt){
  // on move
  // event.target.rotation
});
addEventListener("mouseup", function(evt){
  // on move
  // event.target.rotation
});

Change the degree manually.

dial.angle(90);