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

Category: Javascript | March 27, 2019
Author:ohsiwon
Views Total:4,332 views
Official Page:Go to website
Last Update:March 27, 2019
License:MIT

Preview:

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

Description:

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);

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((evt.target.rotation/360)*100) + ‘%’;
    });

    Reply

Leave a Reply