Simple jQuery Number Picker/Spinner Plugin - dpNumberPicker

dpNumberPicker is a jQuery plugin that converts an DIV element into an input spinner with increase and decrease buttons to simplify the selection of numbers.

More features:

• Custom increment step.
• Fully stylable via CSS.
• Custom number formatting settings.
• Lots of callback events.

Basic Usage:

1. Load the core stylesheet and a skin CSS into your document.

<link rel="stylesheet" href="dpNumberPicker-2.x.css">
<link rel="stylesheet" href="dpNumberPicker-2.x-skin.grey.css">

2. Load jQuery library and the JQuery dpNumberPicker plugin in the document.

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="src/dpNumberPicker-2.x.js"></script>

3. Create an empty element for the input number spinner.

<div id="np"></div>

4. Initialize the plugin to create a basic input number spinner.

$(document).ready(function(){
  dpUI.numberPicker("#np", OPTIONS);
});

5. All the default options & callbacks.

// initial value
start: 0,

// minimum value
min: false,

// maximum value
max: false,

// amount of increment on each step
step: 1,

// custom number format
format: false,

// number formtatter
formatter: function(x){return x;},

// increase/decrease text
increaseText: "+",
decreaseText: "-",

// callbacks
onReady: function(){},
onMin: function(){},
onMax: function(){},
beforeIncrease: function(){},
beforeDecrease: function(){},
beforeChange: function(){},
afterIncrease: function(){},
afterDecrease: function(){},
afterChange: function(){}

---

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