Demo of Spinner methods for stepUp, stepDown, pageUp, pageDown with Pages parameter

Max value is 1988 and min value is set at -1986
Check how the selection of pages change increment and decrement values ( myltiplied by 10 ) of pageUp and pageDown keys and UP and Down keys .

Check how the values are adjusted to Maximum and Minimum options.

HTML

<button type='button' id=b_pageup class='btn btn-success btn-sm'>Page Up 
<span aria-hidden='true'>⇑</span> </button>
 <button type='button' id=b_up class='btn btn-info btn-sm'> Up
 <span aria-hidden='true'>↑</span> </button>
 <input id="spinner" class='selector' value=10 size=6> 
 <button type='button' id=b_down class='btn btn-info btn-sm'> Down 
 <span aria-hidden='true'>↓</span> </button>
 <button type='button' id=b_pagedown class='btn btn-success btn-sm'>Page Down 
 <span aria-hidden='true'>& #8659;</span> </button>

JQuery

<script>
$(document).ready(function() {
var pages = 1 
///////////
$("input:radio[name=r1]").click(function() {
 pages=$(this).val()
})	
////////////
$( "#spinner" ).spinner({max:1988,min:-1986});
////////////
////////////
$("#b_up").click(function() {
$( "#spinner" ).spinner( "stepUp",pages );
})
////////////
$("#b_down").click(function() {
$( "#spinner" ).spinner( "stepDown",pages );
})
////////////
$("#b_pagedown").click(function() {
$( "#spinner" ).spinner( "pageDown" , pages);
})
////////////
$("#b_pageup").click(function() {
$( "#spinner" ).spinner( "pageUp" , pages);
})
//////////
})
</script>