Spinner Input With Virtual Keypad - jQuery Number Control

File Size: 10.5 KB
Views Total: 1256
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Spinner Input With Virtual Keypad - jQuery Number Control

A feature-rich, mobile-compatible, and user-friendly number spinner (also called input spinner, number input, and number picker) jQuery plugin for picking a number by using -/+ buttons.

More Features:

  • Increment and decrement with up/down arrows.
  • Displays a numerical keyboard when picking numbers.
  • Compatible with the latest Bootstrap framework.

How to use it:

1. To use this, load the following JavaScript and CSS file in the document.

<!-- Bootstrap (Recommended but not Required) -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<!-- Open Iconic Font (Recommended but not Required) -->
<link rel="stylesheet" href="/path/to/cdn/open-iconic-bootstrap.min.css" />
<!-- Required -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<!-- jQuery Number Control -->
<script src="./jquery-numbercontrol.js"></script>

2. Create an input field and specify the min/max values if needed:

<input type="text" id="numbercontrol" value="1" min="-100" max="100" />

3. Call the function numbercontrol on the input field to create a basic number spinner.


4. Customize the number spinner by overriding the default options as shown below:


  // debug mode
  debug: false,

  // custom decimal separator
  separator: '.',

  // input type
  type: 'number',

  // custom decrement button
 prependHtml: '<div class="input-group-prepend"><button class="btn btn-decrease btn-outline-secondary px-1"><span class="oi oi-minus" /></button></div>',

  // custom increment button
  appendHtml: '<div class="input-group-append"><button class="btn btn-increase btn-outline-secondary px-1"><span class="oi oi-plus" /></button></div>',

  // CSS class of parent container
  inputParentCss: 'input-group numberControl',

  // tag of parent container
  inputParent: 'div',

  // CSS class of number input
  inputCss: 'numberControlInput form-control px-1',

  // trigger events
  bindButtonEvents: 'click tap touch touchstart',

5. Customize the virtual keypad.


  // custom icons here
  keyboardLanguage: {
    'UP' : '<span class="oi oi-chevron-top" />',
    'DOWN' : '<span class="oi oi-chevron-bottom" />',
    'INVERSE' : '<span class="oi oi-transfer" />',
    'SEP' : '<span class="oi oi-media-record" />',

  // specify custom HTML for buttons
  keyboardControl: {},

  // custom buttons
  buttons: [...Array(10).keys(), 'DELETE', 'CLEAR', 'DONE', 'CANCEL', 'UP', 'DOWN', 'SEP', 'INVERSE']




  • Add bg-body to default table


  • Fixed a bug where if inputParent was empty, nothing would render.


  • Cleanup the implantation of customParseFloat


  • Touchstart and click may cause a double fire event on mobile devices



  • Fixed a issue with precision when using floats/decimals

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