Customizable Number Input Spinner Plugin with jQuery - Spinner.js

Spinner.js is a jQuery plugin that turns a normal text input into a highly customizable number spinner with up/down arrows for easier numeral data input (currency, quantity, daytime, etc).

Features:

• Arrow-up for increment
• Arrow-down for decrement
• Press Arrows or Left-mouse cause continuous changing
• Compatible with Bootstrap framework

Basic usage:

1. Include jQuery library and the jQuery spinner.js plugin on the webpage.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="dist/jquery.spinner.min.js"></script>

2. Create a normal text input field and specify the data rule (see below) using the data-rule attribute.

<div class="spinner" data-trigger="spinner" id="spinner">
  <input type="text" value="1" data-rule="quantity">
  <div class="spinner-controls">
    <a href="javascript:;" data-spin="up">+</a>
    <a href="javascript:;" data-spin="down">-</a>
  </div>
</div>

3. Initialize the plugin with default options.

$("#spinner").spinner();

4. All possible rules with default values.

defaults: { min: null, max: null, step: 1, precision: 0 },
currency: { min: 0.00, max: null, step: 0.01, precision: 2 },
quantity: { min: 1, max: 999, step: 1, precision: 0 },
percent:  { min: 1, max: 100, step: 1, precision: 0 },
month:    { min: 1, max: 12, step: 1, precision: 0 },
day:      { min: 1, max: 31, step: 1, precision: 0 },
hour:     { min: 0, max: 23, step: 1, precision: 0 },
minute:   { min: 1, max: 59, step: 1, precision: 0 },
second:   { min: 1, max: 59, step: 1, precision: 0 }

5. API.

$("#spinner")
  .spinner('delay', 200) //delay in ms
  .spinner('changed', function(e, newVal, oldVal){
    //trigger lazed, depend on delay option.
  })
  .spinner('changing', function(e, newVal, oldVal){
    //trigger immediately
  });

6. More Html5 data attributes.

• data-min: the minimum value, default is null.
• data-max: the maximum value, default is null.
• data-step: the changing-value of per-step, if passed as a function, the function will be called within the spinner object scope.
• data-precision: the precision of value

Changelog:

2019-09-09

• Moved spinningTimer to Spinning scope instead of global (shared) scope

2018-09-08

• v0.2.1: JS  update

2015-03-18

• v0.2.0: Add noConflict function

---

This awesome jQuery plugin is developed by vsn4ik. For more Advanced Usages, please check the demo page or visit the official website.