jQueryUI spinner is not working

Question

I'm trying to change the border width of a div with jQueryUI spinner. But it is not working for me. I have a div called ".active" and an input which an id called "#a2". When the user changes the value of the input i want to have the value of the input as the value of border width. Here is my code:-

$('#a2').spinner(function(){
spin: function(event, ui){
  var getVal = $('#a2').val();
  $('.active').css({borderWidth: getVal});
}
});

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


 <input class="tooltiptext" type="number" id="a2" value="0">


<div class="active" style="height: 100px; width:100px; border: 40px solid green"></div>

Answer 1

You don't have to put the function in argument in the spinner(), but rather an object configuration.

$( "#a2" ).spinner({
  spin: function( event, ui ) {
    var getVal = $('#a2').val();
    $('.active').css({borderWidth: getVal});
  }
});

here is the example fiddle https://jsfiddle.net/au3p693t/

regards.

Answer 2

First you have to set jquery js before jquery ui , also there is now function param in the spinner instantiation , you should pass an object { ... } that you initialize there all the spinner vars and event handlers ....

See below working snippet :

$(function() {
  $('#a2').spinner({
   spin: function( event, ui ) {
      var getVal = $('#a2').val();
      console.log(getVal);
      $('.active').css({
        borderWidth: getVal
      });
   }
  });
});

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>



<input class="tooltiptext" type="number" id="a2" value="0">


<div class="active" style="height: 100px; width:100px; border: 40px solid green"></div>