Demo of Spinner methods for stepUp, stepDown, pageUp, pageDown

Max value is 48 and min value is set at -16
Check how the change in value because of pageUp and pageDown is adjusted to this limit.
Check how we can add pages ( as selected by user ) as parameter for pageUp and pageDown methods

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=4> 
 <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() {
////////////
$( "#spinner" ).spinner({max:48,min:-16});
////////////
////////////
$("#b_up").click(function() {
$( "#spinner" ).spinner( "stepUp" );
})
////////////
$("#b_down").click(function() {
$( "#spinner" ).spinner( "stepDown" );
})
////////////
$("#b_pagedown").click(function() {
$( "#spinner" ).spinner( "pageDown" );
})
////////////
$("#b_pageup").click(function() {
$( "#spinner" ).spinner( "pageUp" );
})
//////////
})
</script>