Demo of Spinner with isValid option

Maximum & Minimum values :

HTML

<div class='col-sm'>
  Maximum
</div>
<div class='col-sm'>
  <label><input type='radio' name='r1' id='r2' value='20' checked>20</label>
</div>
<div class='col-sm'>
  <label><input type='radio' name='r1' id='r2' value='50' >50</label>
</div>
</div><div class="row ">
<div class='col-sm'>
  Manimum
</div>
<div class='col-sm'>
  <label><input type='radio' name='r2' id='r2' value='-5' checked>-5</label>
</div>
<div class='col-sm'>
  <label><input type='radio' name='r2' id='r2' value='-20' >-20</label>
</div>

</div>
</div>
<button type="button" class="btn btn-secondary btn-sm">
  Maximum & Minimum values  :<span id=d1 class="badge badge-light"></span>
</button><br><br>
   <input id="spinner" class='selector' value=12 size=4>

JQuery

<script>
$(document).ready(function() {
////////////
$( "#spinner" ).spinner({
  max: 20,
  min: -5
});
////////////
var max = $( "#spinner" ).spinner( "option", "max" );
var min = $( "#spinner" ).spinner( "option", "min" );
$('#d1').text(  max + " , " + min );
/////
$("input[type='radio']").change(function() {
var r1_val=$("input[name=r1]:checked").val();
var r2_val=$("input[name=r2]:checked").val();
$( "#spinner" ).spinner( "option", "max", r1_val );
$( "#spinner" ).spinner( "option", "min", r2_val );

var max = $( "#spinner" ).spinner( "option", "max" );
var min = $( "#spinner" ).spinner( "option", "min" );
$('#d1').text(  max + " , " + min );

})
//////////
$("#b2").click(function() {
var isValid = $( "#spinner" ).spinner( "isValid" );
$('#msg').html( isValid );
})
//////////
})
</script>