Одна функция взаимодействует с другим javascript

Question

У меня есть 2 функции, которые отлично работают. Я хочу, чтобы они работали вместе. Один из них - слайдер. см. код ниже.

 <script> 
     $(function(){ 
      $(".cloudslider-handle").slider({ 
       range:"min", 
       value:1, 
       min:1, 
       max:10, 
       slide:function(event,ui){ 
        $(".a,.b,.c,.d").width(ui.value * 10+"%"); 
       } 
      }); 
      $(".ui-slider-handle").text("<>"); 
      $(".a,.b,.c,.d").width(10+"%"); 

     }); 
    </script> 

А другой - спидометр. см код ниже

 <script> 

     document.addEventListener("DOMContentLoaded", function(event) { 
      var gg1 = new JustGage({ 
       id: "gg1", 
       formatNumber: true, 
       counter: true 
      }); 
     }); 

    </script> 

Как я могу написать код так, что, когда я сдвиньте ползунок до значения говорят 2, например, что значение будет передано на спидометр?

Answer 1

Вы можете посмотреть следующий код. Может быть, это вам немного поможет:

Обратите внимание на change: function(event, ui) обработчик событий для слайдера. Он получает новую величину от слайдера и обновляет JustGage по телефону gg1.refresh(newValue);

<script type="text/javascript"> 
    $(function(){ 

     var gg1 = new JustGage({ 
      id: "gg1", 
      formatNumber: true, 
      counter: true 
     }); 

     $(".cloudslider-handle").slider({ 
      range:"min", 
      value:1, 
      min:1, 
      max:10, 
      slide:function(event,ui){ 
       $(".a,.b,.c,.d").width(ui.value * 10+"%"); 
      }, 

      change: function(event, ui) { 
       var newValue = ui.value * 10; 
       gg1.refresh(newValue); 
      } 
     }); 
     $(".ui-slider-handle").text("<>"); 
     $(".a,.b,.c,.d").width(10+"%"); 

    }); 

</script>