Get new jQuery plugins just once a week



August 29, 2014

JogDial-js | A JavaScript plugin for jog dial controls.


A JavaScript plugin for jog dial controls.

JogDial is a simple JavaScript plugin that help you to create dial style controller easily on the webpage.

Supported browsers and device

JogDial supports Chrome, Safari, FireFox, Internet Explorer 7+ and most of modern browsers include mobile device.



Click here



Here is a basic example of JogDial.js initialization. This will start the JogDial in debug mode.

You must create the target element for the JogDial and setup the width and height property before the code start.

var el = document.getElementById('your_element');
var dial = JogDial(el, {debug: true});

You can change the setting by passing an options (array) in second argument.

var options = {debug: true, wheelSize: 90%, knobSize: 50%, minDegree: 0};
var dial = JogDial(el, options);


The easiest way to style the JogDial is adding background image to your target element and knob element created from JogDial script.

JodDial always return the knob id name append to the target element name you've created.

For an example, if you named the tag element id as "dial", then knob id will be "dial_knob".

#dial {
    width: 200px;
    height: 200px;

#dial_knob {
    // This is your knob style

You can add any additional elements inside of your target element and it won't interfere the JogDial function.


Here is a list of options can be used on JogDial.

Options Descriptions Default
debug bool Show debug overlay on the top of screen false
touchMode string Set the active touch area of JogDial control. 'knob' or 'wheel' knob
knobSize int Set the diameter of knob in percentage or pixel 30%
wheelSize int Set the diameter of wheel in percentage or pixel 100%
zIndex int Set the z-index of JogDial 9999
degreeStartAt int Set the degree of wheel at start 0
minDegree int Set the minimum degree of wheel rotation null (infinite)
maxDegree int Set the maximum degree of wheel rotation null (infinite)


Events can be added or removed with the on and off methods and those are chainable like a jQuery.

JogDial(el, {debug: true})
.on("mousemove", function(event){ console.log(; })
.on("mouseup", function(event){ console.log(; });

Event list

Event Data list from callback  {number}     total sum of rotated degree from the start.    {number}     Current degree of circle in clock angle.


You can change the angle of JogDial element by passing the number value to 'angle' function.

var dial = JogDial(el, {debug: true});
// This will change the JogDial degree to 45.


Licensed under the MIT license

Created by Sean Oh



JogDial-js javascript plugin



Related posts:

PageGuide js
JogDial-js javascript plugin

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever
Couple Gift Ideas