Demo of Spinner Page option

Page option value :

After changing the Page value selection using radio buttons, use Page UP or Page Down keys to see the change in the page value.

Up and down arrow changes the value of the spinner as set by Step option.

JQuery

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

var page = $( "#spinner" ).spinner( "option", "page" );
$('#d1').text(  page );
$('#spinner').focus(); // Bring the focus to spinner
})
//////////
$('#spinner').focus(); // Bring the focus to spinner
////
})
</script>

HTML

<div class="row ">
<div class='col-sm'>
  Page 
</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' checked>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">
  Page option value  :<span id=d1 class="badge badge-light"></span>
</button><br><br>
   <input id="spinner" class='selector' value=10 size=4>