Demo of Spinner with Max & Min value
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>
<div class="d-flex justify-content-center"> <input id="spinner" class='selector' value=12 size=4></div>
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 );
})
//////////
})
</script>