Skip to content
A tiny jQuery plugin for styling HTML number inputs
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Fix issue with initial value being < min Feb 3, 2018
example Add example file Feb 3, 2018
src Fix issue with initial value being < min Feb 3, 2018
.gitignore Add .gitignore Nov 19, 2017
LICENSE Create LICENSE Nov 19, 2017
README.md Integrate minification with gulp Dec 29, 2017
gulpfile.js Integrate minification with gulp Dec 29, 2017
package.json v2.0.0 Feb 3, 2018
yarn.lock Add jQuery to dependencies Feb 2, 2018

README.md

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'

Development

Building

Install the project dependencies

$ yarn install

Build the project

$ gulp
You can’t perform that action at this time.