JSFiddle - React, Tailwind, and code Playground

by johansrk

HTML

<script src="https://raw.github.com/aterrien/jQuery-Knob/master/js/jquery.knob.js"></script>
<input class="knob nummer1 animated" value="0" rel="64">
    <input class="knob nummer2 animated" value="0" rel="77">
        <input class="knob nummer3 animated" value="0" rel="99">

JavaScript

$(function ($) {

                $(".knob").knob();

    $(".animated").each(function(){

                    $this = $(this);
                    var myValue =  $this.attr("rel");  
                    
                    $({value: 0}).animate({value: myValue}, {
                        duration: 1000,
                        easing:'swing',
                        step: function() 
                        {
                            $this.val(Math.ceil(this.value)).change();
                        }
                    });
                });


                // $({value: 0}).animate({value: $('.nummer1').attr("rel")}, {
                //     duration: 1000,
                //     easing:'swing',
                //     step: function() 
                //     {
                //         $('.nummer1').val(Math.ceil(this.value)).trigger('change');
                //     }
                // });

                // $({value: 0}).animate({value: $('.nummer2').attr("rel")}, {
                //     duration: 1000,
                //     easing:'swing',
                //     step: function() 
                //     {
                //         $('.nummer2').val(Math.ceil(this.value)).trigger('change');
                //     }
                // });
                // $({value: 0}).animate({value: $('.nummer3').attr("rel")}, {
                //     duration: 1000,
                //     easing:'swing',
                //     step: function() 
                //     {
                //         $('.nummer3').val(Math.ceil(this.value)).trigger('change');
                //     }
                // });
                
                

                    
                    
                  
               

               
            });