jQuery UI Library Spinner


Syntax

  • $( "#id" ).spinner();
  • $( "#id" ).spinner({min:0,max:100,step:5,spin:function( event, ui ) {}});

Parameters

ParametersDetail
minMinimum value
maxMaximum value
stepHow much the value increases by on spinner click, can be decimal
spinCan be used to check the spinner value, ui.value and do something

Remarks

Official Example

Official Documentation

Basic Example

Makes entering numbers a bit handier by showing a set of arrows on the right side of the input.

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="/resources/demos/external/jquery-mousewheel/jquery.mousewheel.js"></script>
<script>
  $( function() {
    var spinner = $( "#spinner" ).spinner();
  } );
</script>
 
<input id="spinner" name="value">