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="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.nice-number.js"></script>

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

$(function(){

  $('input[type="number"]').niceNumber();

});

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">
  <button>-</button>
  <input type="number" value="100" style="width: 4ch;">
  <button>+</button>
</div>

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

$('input[type="number"]').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.

$('input[type="number"]').niceNumber({

  /**
    callbackFunction
    @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,
  
});

Changelog:

v2.1.0 (2020-08-27)

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

2020-02-12

• fix issue with input container being malformed after uglification

2020-02-12

• Fixed several nice numbers

2019-07-20

• v2.0.1

2018-02-03

• Fix issue with initial value being < min

2017-12-29

• 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.