Number Input Spinner With jQuery - Nice Number
File Size: | 54.1 KB |
---|---|
Views Total: | 24606 |
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' });
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.