jquery Knob

HTML

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="//cdn.jsdelivr.net/jquery.knob/1.2.2/jquery.knob.js"></script>
<input type="text" value="75" class="infinite" data-width="150" data-cursor=true data-thickness=".5" data-fgColor="#AAAAAA" data-bgColor="#FFFFFF" data-displayInput="false">
    
    <div class="idir"></div>
    <div class="ival"></div>

CSS

body {
    background: lightgray;
}

JavaScript

$(function () {
    var v, 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({
        min: 0,
        max: 20,
        stopper: false,
        change: function () {
            if (v > this.cv) {
                if (up) {
                    decr();
                    up = 0;
                } else {
                    up = 1;
                    down = 0;
                }
            } else {
                if (v < this.cv) {
                    if (down) {
                        incr();
                        down = 0;
                    } else {
                        down = 1;
                        up = 0;
                    }
                }
            }
            v = this.cv;
        }
    });
});