Number Input - Knob

by bizamajig

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="http://anthonyterrien.com/js/jquery.knob.js"></script>
<input type="text" name="knobTest" value="10" data-max="30" data-min="0" class="knob" id="knobTest">

<div style="width:150px; height:150px;">
    <button type="button" class="btn" style="border-radius:150px 150px 0px 0px; width:150px;height:75px;" value="0" name="btn8">Btn1</button>
    <button type="button" class="btn" style="border-radius:0px 0px 150px 150px; width:150px;height:75px; " value="0" name="btn8">Btn2</button>
</div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

JavaScript

$("#knobTest, .knob").knob({
    width: 150,
    fgColor: '#B80000',
    displayInput: true,
    displayPrevious: false,
    cursor: 10,
    thickness: .1,
    step: 1,
    stopper: true,
    release: function (value) {
        console.log("set knob value to : " + value);
    },
        'draw': function () {
        if ($(this.i).siblings(".kb-buttons").length > 0) return
        var pos1 = parseInt($(this.i).css("marginLeft").replace('px', ''));
        var pos2 = parseInt($(this.i).css("marginTop").replace('px', ''));
        var $elem = $("<span>Btn2</span>").addClass("kb-buttons");
        $elem.insertAfter(this.i).css({
            position: "absolute",
            marginLeft: (pos1+25) + "px",
            marginTop: (pos2 + 55) + "px"
        });
        var $elem = $("<span>Btn1</span>").addClass("kb-buttons");
        $elem.insertAfter(this.i).css({
            position: "absolute",
            marginLeft: (pos1+25) + "px",
            marginTop: (pos2 - 25) + "px"
        });
    }
});

$("body").on("click",".kb-buttons",function(){
    alert('click');
});