Demo of setting & getting step option of Spinner

Step option value :

After changing the Step value selection using radio buttons, use Arrow UP or Arrow Down keys to see the change in the step value.

PageUp and PageDown keys changes the value of the spinner as set by Page option.

JQuery

<script>
$(document).ready(function() {
////////////
$( "#spinner" ).spinner();
////////////
var step = $( "#spinner" ).spinner( "option", "step" );
$('#d1').text(  step );
/////
$("input:radio[name=r1]").click(function() {
var sel=$(this).val()
$( "#spinner" ).spinner( "option", "step", sel );

var step = $( "#spinner" ).spinner( "option", "step" );
$('#d1').text(  step );

$('#spinner').focus(); // Bring the focus to spinner
})
//////////
$('#spinner').focus(); // Bring the focus to spinner
////
})
</script>

HTML

<div class='alert alert-primary'>
<div class="row ">
<div class='col-sm'>
  Step 
</div>
<div class='col-sm'>
  <label><input type='radio' name='r1' id='r2' value='1' checked>1</label>
</div>
<div class='col-sm'>
  <label><input type='radio' name='r1' id='r2' value='5' >5</label>
</div>
<div class='col-sm'>
  <label><input type='radio' name='r1' id='r2' value='10' >10</label>
</div>
<div class='col-sm'>
  <label><input type='radio' name='r1' id='r2' value='25' >25</label>
</div>

<div class='col-sm'>
  <label><input type='radio' name='r1' id='r2' value='50' >50</label>
</div>
<div class='col-sm'>
  <label><input type='radio' name='r1' id='r2' value='100' >100</label>
</div>
</div>
</div>
<button type="button" class="btn btn-secondary btn-sm">
  Step option value  :<span id=d1 class="badge badge-light"></span>
</button> <br>
<br>
  <input id="spinner" class='selector' value=10 size=4>