jQuery Knob

Example

<input type="text" value="75" class="dial">

<script>
$(function() {
    $(".dial").knob();
});
</script>

Options

Options are provided as attributes ‘data-option’:

<input type="text" class="dial" data-min="-50" data-max="50">

… or in the “knob()” call :

$(".dial").knob({
                'min':-50
                ,'max':50
                });

The following options are supported :

Behaviors :

UI :

Hooks

<script>
$(".dial").knob({
                    'release' : function (v) { /*make something*/ }
                });
</script>

The scope (this) of each hook function is the current Knob instance (refer to the demo code).

Example

<input type="text" value="75" class="dial">

<script>
$(".dial").knob({
                 'change' : function (v) { console.log(v); }
                });
</script>

Dynamically configure

<script>
$('.dial')
    .trigger(
        'configure',
        {
        "min":10,
        "max":40,
        "fgColor":"#FF0000",
        "skin":"tron",
        "cursor":true
        }
    );
</script>

Set the value

<script>
$('.dial')
    .val(27)
    .trigger('change');
</script>

Supported browser

Tested on Chrome, Safari, Firefox, IE>=8.0 (IE8.0 with excanvas).

secretplan