fancyknob
Jquery plugin to replace range inputs with a fancy knob
#DEMO
#usage
load fancyknob.css in the document head
load jquery
load fancyknob.js
then:
$('.your-range-input-class').fancyknob();
based on https://codepen.io/blucube/pen/cudAz
if you set up negative minimal value of the input range the knob will split in 2 halfes and the zero will be set in the middle. (usefull for pan control)
set label name using data-label="my label"
set precise value using mouse well
call turn to return the current value (in integer) of the knob:
$('.your-range-input-class').fancyknob({ turn: function(currentValue){ // your code } });