Number Input Spinner With jQuery - Nice Number

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

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'
  
});

Changelog:

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 joshua-s. For more Advanced Usages, please check the demo page or visit the official website.