Easy Input Spinner Plugin For Bootstrap 4 - InputSpinner.js

Easy Input Spinner Plugin For Bootstrap 4 - InputSpinner.js
File Size: 12.1 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

An easy yet customizable input spinner plugin for Bootstrap 4 framework that enables the users to increment/decrement a number by using +/- buttons.


$ npm install bootstrap-input-spinner --save

How to use it:

1. Load the necessary jQuery library and Bootstrap 4 framework in the html document.

<!-- Stylesheet -->
<link rel="stylesheet" 

<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 

2. Load the JavaScript file InputSpinner.js after jQuery.

<script src="InputSpinner.js"></script>

3. Create a normal number input for the input spinner. The plugin supports native input attributes such as value, min, max and step.

<input type="number" value="5" min="0" max="100" step="1">

4. Initialize the input spinner by calling the function on the number input.


5. If you want to limit the number of decimal places:

<input type="number" value="5" min="0" max="100" step="1"

6. Max step is supproted as well:

<input type="number" value="5" min="0" max="100" step="1"

7. Available plugin options to customize the input spinner.


  // button text/icons
  decrementButton: "<strong>-</strong>", 
  incrementButton: "<strong>+</strong>", 

  // class of input group
  groupClass: "input-group-spinner",

  // button class
  buttonsClass: "btn-outline-secondary",

  // button width
  buttonsWidth: "2.5em",

  // text alignment
  textAlign: "center",

  // delay in milliseconds
  autoDelay: 500, 

  // interval in milliseconds
  autoInterval: 100,

  // boost after these steps
  boostThreshold: 15, 

  // boost multiplier
  boostMultiplier: 2,

  // detects the local from `navigator.language`, if null
  locale: null 

8. Event handlers:

changedElement.addEventListener("change", function(event) {
  valueOutput.innerHTML = changedElement.value

9. Change the value programmatically:

instance.setValue(new value)


 v1.10.17 (2019-03-11)

  • dynamically handling of min, max, step and other main attributes

 v1.10.16 (2019-02-26)

 v1.10.14 (2019-01-24)

  • Minor improvement of the step calculation

 v1.10.10 (2019-01-08)

  • Minor improvement of the step calculation

 v1.10.9 (2019-01-01)

  • better ie support without polyfill

 v1.10.5 (2018-12-22)

  • improved es5 compatibility

 v1.10.2 (2018-12-21)

  • changed default buttonsWidth from `em` to `rem`

 v1.9.7 (2018-12-17)

  • changed default buttonsWidth from `em` to `rem`

 v1.9.4 (2018-12-17)

  • minor change

 v1.7.0 (2018-11-18)

  • Fixed: when spinner max value is 0 the upper limit is not respected.

v1.6.4 (2018-09-24)

  • Fixed: when spinner max value is 0 the upper limit is not respected.

v1.6.3 (2018-09-17)

  • Set boostMultiplier: "auto" to continuously auto increase the multiplier

v1.6.1 (2018-07-30)

  • Changed the plugin function to lower camel case and the filename of the main script

v1.5.19 (2018-06-11)

  • minor improvement

v1.5.11 (2018-06-11)

  • minor Bugfix

v1.4.12 (2018-06-10)

  • JS & DOC updated

v1.4.11 (2018-06-06)

  • JS & DOC updated

v1.4.9 (2018-05-16)

  • minor optimization

v1.3.25 (2018-05-16)

  • minor optimization

v1.3.24 (2018-05-16)

  • Trigger "change" and "input" events on value change

v1.3.23 (2018-04-27)

  • Updated.Minor performance improvement

v1.3.22 (2018-04-26)

  • Updated.

v1.3.21 (2018-04-24)

  • Updated.

v1.3.19 (2018-03-22)

  • Copy classes 'is-invalid' and properties 'required', 'placeholder'

v1.3.16 (2018-03-18)

  • Updated


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