A Beautiful JavaScript Knob (Circular Switch) UI Component – jQuery Knob

jQuery Knob is a lightweight jQuery plugin for creating good-looking circular switches (like the "volume controls" in radios).

It works by transforming any given input fields according to the values defined in its attributes and can be drag 'n' dropped to change the value.

jQuery Knob Control

We can define the min-max values, default value on initial load, color and put it into "read-only" mode (which is also good for using it as a visualization component).

There are no documents for the plugin but things are very straightforward and checking the source code of the demo is pretty enough to learn its logic.

  • Hi,
    Looks great, is there a way to update the “knob”? I tried using simple jQuery to remove the generated canvas knob, and then re-apply the knob, but it seemed to not work.
    I guess a method “.refresh()” would be great, or even a way to bind to the value of the input element containing the visualized number.
    But great work!

    /Sten

  • Caleb Hanson

    @Sten You can do this:
    $(“#knob1”).trigger(“change”);
    where knob1 is the id of the .knob input element

    This simulates a change event, which redraws the dial even if data-readOnly is set to true. It’s a little hackish, but it gets the job done.

  • @Caleb Hanson
    Thanks a lot !! It helped me !

  • Michel

    Great widget!! I’m using it on an interactive art piece.

    But here’s a strange thing: With jQuery I can set all the parameters, no problem with this code, except for the readOnly option. It just won’t change.
    What am I doing wrong?

    $(“#lockCells”).trigger(‘configure’,{
    ‘thickness’:.6,
    ‘width’:120,
    ‘displayPrevious’:true,
    ‘readOnly’:true,
    });

  • Sandhya

    This widget is really nice!!! Unfortunately the textbox doesnt show up wen combined wit jquery mobile.. Any fix for that???

  • I tried this in my recent project, but is there a way to add % symbol in when displaying the triggered value??

Search