Number Input Spinner With jQuery - Nice Number

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.

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'

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

  • Publication date: 01.12.2017
  • Source