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

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);
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) + ‘%’;
});