jQuery Knob is a dial knob that turn your simple input field into a cool looking knob. It's super easy and can be setup in seconds!
Knob requires that you only need to have jQuery included in your page and the knob .js itself. No .png/jpeg or CSS needed
Knob has many option/configuration available for you to custom the knob to your taste. We'll go over some of them in this video!
First let's go to knob GitHub page to get the library (link at the description below)
The .js we need is in dist folder
I'm going to copy link to jquery.knob.min.js and include to our example.
(I need to use RawGit since we can't direct link to the .js file in Github)
OK, now we have the knob js file ready. Next I'll define our input field
The value field is the default value of our knob. I'll set it to 10 for now
I'll add add class "dial" to our input field.
To initiate the knob, just call knob() from jQuery object
(don't forget to include jQuery to your page!)
Knob is here!
To custom your knob, there are lots of option available...
For example, you can set color, size, min and max value of the knob. Using these options on the GitHub page
Let's try setting the min and max value. We just need to pass the min and max value
Next is "angleOffset" which will let you specify the arc range in degrees
Setting width and height in pixel (no "px" needed)
'displayInput' allows you to hide the value digits at the knob center
'fgColor' is the knob dial bar color
Finally, knob also let you specify "release" eventhandler. You can code what to do when user release the mouse on the knob.
The current knob value will also be passed into the function
Don't forget that there are still many option/config available for you to try. For example you can change your thickness or even dynamically change the knob style by the javascript!
Thank you for watching, Please subscribe if you'd like us :)