Minimal Number Picker Plugin For jQuery - Wan Spinner

Wan Spinner is a simple, lightweight jQuery plugin for converts a text field into an input spinner for picking number by using plus / minus buttons.

How to use it:

1. Download the wan spinner plugin and include the wan-spinner.js script after jQuery library but before the closing body tag.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="/path/to/wan-spinner.js"></script>

2. Create a text field with plus / minus buttons on your webpage.

<div class="wan-spinner demo">
  <a href="javascript:void(0)" class="minus">-</a>
  <input type="text" value="1">
  <a href="javascript:void(0)" class="plus">+</a>
</div>

3. Call the function to initialize the input spinner.

$(".demo").WanSpinner(options);

4. Customization options and callback events available.

// maximum value 
maxValue: 999,

// minimum value
minValue: -999,

// custom step
step: 1,

// starting value
start: 1,

// width of the text input
inputWidth: 40,

// callbakcs
plusClick: function(element, val) {
  return true;
},

minusClick: function(element, val) {
  return true;
},

exceptionFun: function(exp) {
  return true;
},

valueChanged: function(element, val) {
  return true;
}

Change log:

2015-10-20

• JS update

---

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