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

Category: Javascript | March 27, 2019
Views Total:4,485 views
Official Page:Go to website
Last Update:March 27, 2019


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
addEventListener("mousedown", function(evt){
  // on move
addEventListener("mouseup", function(evt){
  // on move

Change the degree manually.


You Might Be Interested In:

One thought on “Mobile-friendly Dial Knob Plugin In Vanilla JS – JogDial.js

  1. Herby Handcock

    for slider in Vanilla JS

    document.addEventListener(‘mousemove’, function(evt){
    document.querySelector(‘#jog_dial_example_meter div’).style.width = Math.round((*100) + ‘%’;


Leave a Reply