How to use jQuery knob in your website

  1144 views   11 months ago jQuery

jQuery Knob is the simple jQuery plugin which provides simple, touchable and canvas based jQuery dial which can enhance your admin dashboard.

jQuery Knob supports touch, mouse and mousewheel. It is keyboard events implemented and overloads an input element.

jQuery Knob uses jQuery to run its script. To use jQuery Knob in your web application, first include jQuery CDN before you include jQuery Knob script. Download jQuery Knob from the GitHub. or Alternatively you can also directly load script file from CDNJS.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Knob/1.2.13/jquery.knob.min.js"></script>

And then include this tags

<input type="text" value="75" class="dial">
<script type="text/javascript">
    $(function() {
        $(".dial").knob();
    });
</script>

You can pass additional options as attributes data-option like this:

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

Or you can also pass options in knob() functio.

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

Here is the available options that you can pass.

Behaviour based options:

min : min value, default=0.
max : max value, default=100.
step : step size, default=1.
angleOffset : starting angle in degrees, default=0.
angleArc : arc size in degrees, default=360.
stopper : stop at min & max on keydown/mousewheel, default=true.
readOnly : disable input and events, default=false.
rotation : direction of progression, default=clockwise.

 

UI based options:

cursor : display mode "cursor", cursor size could be changed passing a numeric value to the option, default width is used when passing boolean value "true", default=gauge.
thickness : gauge thickness.
lineCap : gauge stroke endings. default=butt, round=rounded line endings
width : dial width.
height : dial height.
displayInput : default=true, false=hide input.
displayPrevious : default=false, true=displays the previous value with transparency.
fgColor : foreground color.
inputColor : input value (number) color.
font : font family.
fontWeight : font weight.
bgColor : background color.

Here is the complete code to use jQuery Knob.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>jQuery Knob</title>
    <!-- jquery cdn -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- jquery knob cdn -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Knob/1.2.13/jquery.knob.min.js"></script>
</head>
<body style="margin: 100px 200px;">
    <input type="text" value="75" class="dial">
    <script type="text/javascript">
        $(function() {
            $(".dial").knob();
        });
    </script>
</body>
</html>

jQuery Knob is not the big tool but still it can enhance user experience and make dashboard beautiful. Here is the official documentation. I hope this will help you. If you have any inquiry, please write in the bellow comment section.

Author : Harsukh Makwana
Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]