Spinner

Other topics

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">

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

Contributors

Topic Id: 6637

Example Ids: 22612

This site is not affiliated with any of the contributors.