Customizable Number Input Spinner Plugin with jQuery - Spinner.js

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="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="dist/jquery.spinner.js"></script>

2. Create a normal text input field and specify the data rule 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 default rules.

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

Change log:

2018-03-12

  • 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.

  • Publication date: 12.03.2018
  • Source