Knobs!

by secretgspot

HTML

<script src="http://anthonyterrien.com/knob/js/jquery.knob-1.1.1.js"></script>

<div style="width:250px; display:inline;">
    <canvas width="250" height="250"></canvas>
    <input class="knob" data-width="250" data-min="0" data-max="20" value="5">
</div>

JavaScript

//http://anthonyterrien.com/knob
$(function() {
                $(".knob").knob();

                // Example of infinite knob, iPod click wheel
                var val,up=0,down=0,i=0
                    ,$idir = $("div.idir")
                    ,$ival = $("div.ival")
                    ,incr = function() { i++; $idir.show().html("+").fadeOut(); $ival.html(i); }
                    ,decr = function() { i--; $idir.show().html("-").fadeOut(); $ival.html(i); };
                $("input.infinite").knob(
                                    {
                                    'change':function(v){
                                                if(val>v){
                                                    if(up){
                                                        decr();
                                                        up=0;
                                                    }else{up=1;down=0;}
                                                }else{
                                                    if(down){
                                                        incr();
                                                        down=0;
                                                    }else{down=1;up=0;}
                                                }
                                                val=v;
                                                
                                            }
                                    }
                                    );

                 /*$(".knob").knob(
                                {
                                'change':function(e){
                                        console.log(e);
                                    }
                                }
                            )
                           .val(79)
                           ;*/
            });