Home / jQuery / Dynamically animate jQuery knob

Dynamically animate jQuery knob

jQuery Knob is a user friendly input method shown in a form of a dial. This is one of the most used jQuery plugin today, many popular organizations use jQuery Knob to show their work progress.

Key Features:

* Touch enabled
* Mouse click
* Mouse wheel
* Keyboard events

For tutorial purpose I haven’t included all methodologies in the download file, so grab your copy form Github.

SOURCE

Let us begin with the Markup, we need to create working knobs, an input field that takes integers as values and a button to trigger the animate event.

Now that we have our mark up ready with working knobs. Let us play the trick using jQuery. Once the jquery.knob.js is include in the page you just need to use the $(‘.class’).knob() to trigger the event on any knob.

Here is a simple knob trigger event

Assuming that the knob event is triggered we need to add animation to it by setting a minimum and a maximum value

Note: $(‘.knob’).val(this.value).trigger(‘change’); Do not forget to trigger the animate function on a specific class!

Now we have successfully animated the knob when the page loads. Now lets get into the heart of this tutorial – To animate the knob dynamically by setting a custom value either positive or negative. The trick here is to get the initial value initval and store it in the preval and then store the dynamic value into newval. Finally trigger the click event. This process is repeated to achieve the objective.

I hope you find this tutorial helpful.

Download   Preview

About Ashik

I am a Full Stack Developer and love to work on APIs and Apps. Hardcore lover of Ionic and Laravel <3

Check Also

Private chatroom using socket.io, NodeJS and MySQL

As I promised to write a tutorial on Private chatroom with MySQL DB in the …

  • Juanma Menéndez

    Can you put an example (jsfiddle or codepen)?

  • Mercy Torres

    Thank you very much!! It worked good for me!

Do you wan't to get notified?

I will not spam your inbox. I will only send email whenever I publish a new article or to share information about technology

You have Successfully Subscribed!