Customizable Number Input Spinner Plugin with jQuery - Spinner.js
File Size: | 31.7 KB |
---|---|
Views Total: | 10900 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.