Simple jQuery Number Picker/Spinner Plugin - dpNumberPicker

File Size: 14.7 KB
Views Total: 12065
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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=""></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.

  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.