🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

fancyknob is an easy-to-use jQuery plugin which converts the normal range input into a nice, customizable knob with support for both mouse drag and touch interactions.

Range-Slider knob

Documentation

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

You May Also Like