ferndot / jquery.nice-number

A tiny jQuery plugin for styling HTML number inputs

jQuery Nice Number

A tiny plugin that converts HTML numeric inputs (type="number") into an easily-styled format.

Usage

Prerequisites

Download the project files or install it using Yarn, NPM, etc...

$ yarn add jquery.nice-number
$ npm install jquery.nice-number --save

Include the plugin files in your source.

Note: the path will need to be changed if you downloaded or moved the files.

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

Basic usage

Call the niceNumber() function on your jQuery element of choice.

Pro Tip: use $('input[type="number"]') to select all numeric inputs in the current page.

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

Advanced usage

You can pass an optional object to niceNumber() containing advanced configuration options.

Currently supported options

Name	Permitted values	Description	Default value
autoSize	boolean	Enables or disables automatic input sizing to fit content	true
autoSizeBuffer	number	The number of extra character widths that are added to the element's content size calculation when automatically sizing	1
buttonDecrement	jQuery element, HTML element, HTML string, or plain string	The contents of the decrement button	'-'
buttonIncrement	jQuery element, HTML element, HTML string, or plain string	The contents of the increment button	'+'
buttonPosition	'around', 'left', or 'right'	The positions of the control buttons	'around'
onDecrement	false or function	callback function to run on decrement	false
onIncrement	false or function	callback function to run on increment	false

Callback Examples

Passed arguments are $currentInput: the selected input in a jQuery object, the new amount, and the niceNumber settings.

$('input[type="number"]').niceNumber({
	onIncrement: function ($currentInput, amount, settings) {
		if (amount >= 100) {
			$currentInput.classList.add('more-than-100');
		} else {
			$currentInput.classList.remove('more-than-100');
		}
	},
});

Development

Building

Install the project dependencies

$ yarn

Build the project

$ yarn gulp

Or individually

$ yarn gulp css

$ yarn gulp js

$ yarn gulp copy # copies the contents of the src folder to the dist folder

If you are developing on the project, you can use

$ yarn gulp dev # runs default, then copy, css, js on save of any src file

jquery.nice-number's Issues

Min and Max attribute with empty value

When input fields have Max or Min attribute with empty value, jQuery Nice Number doesn't work.
<input type="number" class="number" max="" min="" />

several nice numbers

How to create some nice numbers in sequence?
Every time I add a new input, I must to initialize the plugin again and then I see that the number of +/- buttons is increasing:

Something like onIncreased and onDecreased method ?

I need to do something on increasing or decreasing the value? any idea with this ?

does not work if input is between <form> </form>

FYI: utility is great but when input field is sandwiched between form tags, it will not increment

jQuery Nice Number Plugin Demo