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.

  1. Reply Sten Hougaard May 9, 2012 at 2:52 AM

    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!


  2. Reply Caleb Hanson June 1, 2012 at 12:21 PM

    @Sten You can do this:
    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.

  3. Reply El Nico June 10, 2012 at 1:45 PM

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

  4. Reply Michel September 11, 2012 at 8:30 PM

    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?


  5. Reply Sandhya May 6, 2013 at 1:52 AM

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

  6. Reply Jogesh Sharma May 15, 2013 at 5:01 AM

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

Leave a reply