Number Input Spinner With jQuery - Nice Number

File Size: 54.1 KB
Views Total: 24014
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Number Input Spinner With jQuery - Nice Number

The Nice Number jQuery plugin turns the regular number input into a handy input spinner that allows the user to pick numbers by using increment/decrement buttons. Licensed under the GNU General Public License v3.0.

How to use it:

1. Include the JavaScript jquery.nice-number.js and style sheet jquery.nice-number.css on the html page.

<link href="jquery.nice-number.css" rel="stylesheet">
<script src="" 
<script src="jquery.nice-number.js"></script>

2. Call the function niceNumber() and the plugin will do the rest.




3. This will convert the normal number input ...

<input type="number" value="100">

4. Into an input spinner control with increment/decrement buttons like this:

<div class="nice-number">
  <input type="number" value="100" style="width: 4ch;">

5. Customize the input spinner control by passing the following options to the niceNumber().


  // auto resize the number input
  autoSize: true,

  // the number of extra character
  autoSizeBuffer: 1,

  // custom button text
  buttonDecrement: '-',
  buttonIncrement: "+",

  // 'around', 'left', or 'right'
  buttonPosition: 'around'

6. Callback functions.


    @param {$input} currentInput - the input running the callback
    @param {number} amount - the amount after increase/decrease
    @param {object} settings - the passed niceNumber settings
  onDecrement: false,
  onIncrement: false,


v2.1.0 (2020-08-27)

  • Clean up some logic
  • New onIncrement() and onDecrement() callbacks
  • Bugs fixed.


  • fix issue with input container being malformed after uglification


  • Fixed several nice numbers


  • v2.0.1


  • Fix issue with initial value being < min


  • Fixed: does not work if input is between <form> </form>

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