jQueryUI spinner is not working

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>

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.