Easy Input Spinner Plugin For Bootstrap 4 and 5 - InputSpinner.js

An easy yet customizable input spinner plugin (less than 4KB minified) for Bootstrap framework (Bootstrap 4 & 5) that enables the users to increment/decrement a number by using +/- buttons.

Installation:

# NPM
$ npm install bootstrap-input-spinner --save

How to use it:

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

<!-- Bootstrap -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

<!-- Only required when using Bootstrap 4 -->
<script src="/path/to/cdn/jquery.min.js"></script>

2. Import the InputSpinner.js script.

<!-- Bootstrap 5 Version -->
<script type="module">
  import {InputSpinner} from "./src/InputSpinner.js"
</script>

<!-- Bootstrap 4 Version -->
<script src="bootstrap-input-spinner.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.

// Bootstrap 5 Version
const inputSpinnerElements = document.querySelectorAll("input[type='number']")
  for (const inputSpinnerElement of inputSpinnerElements) {
    new InputSpinner(inputSpinnerElement, {
        // options here
    })
}

// Bootstrap 4 Version
$("input[type='number']").inputSpinner({
  // options here
});

5. If you want to limit the number of decimal places and disable thousands separator:

<input type="number" value="5" min="0" max="100" step="1"
       data-decimals="2"
       data-digit-grouping="false">

6. Add prefix & suffix to the input element

<input type="number" value="5" min="0" max="100" step="1"
       data-prefix=""
       data-suffix="">

7. Set the input mode. Default: 'decimal'.

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

8. Available plugin options to customize the input spinner.

{

  // button text/icons
  decrementButton: "<strong>&minus;</strong>", 
  incrementButton: "<strong>&plus;</strong>",

  // class of input group
  groupClass: "",

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

  // button width
  buttonsWidth: "2.5em",

  // text alignment
  textAlign: "center",

  // delay in milliseconds
  autoDelay: 500, 

  // interval in milliseconds
  autoInterval: 50,

  // set this `true` to disable the possibility to enter or paste the number via keyboard
  buttonsOnly: false, 

  // set this to `false` to disallow the use of the up and down arrow keys to step
  keyboardStepping: true, 

  // the locale, per default detected automatically from the browser
  locale: navigator.language, 

  // the editor (parsing and rendering of the input)
  editor: I18nEditor, 
  
  // the template of the input
  template: // the template of the input
    '<div class="input-group ${groupClass}">' +
    '<button style="min-width: ${buttonsWidth}" class="btn btn-decrement ${buttonsClass} btn-minus" type="button">${decrementButton}</button>' +
    '<input type="text" inputmode="decimal" style="text-align: ${textAlign}" class="form-control form-control-text-input"/>' +
    '<button style="min-width: ${buttonsWidth}" class="btn btn-increment ${buttonsClass} btn-plus" type="button">${incrementButton}</button>' +
    '</div>'
  
});

9. Event handlers:

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

10. Change the value programmatically:

instance.setValue(new value)

11. Destryo the instance.

instance.destroy()

Changelog:

v4.0.0 (2024-02-05)

• • deprecated the old es5 version. It is now a module

v3.3.0 (2023-05-11)

• New es6 module beta version under /src/es6-beta.

v3.2.0 (2023-03-09)

• changed the id postfix from "_MP_cBdLN29i2" to ":input_spinner".

v3.1.14 (2022-11-24)

• var => let / const

v3.1.13 (2022-08-06)

• Fixed: min max and value change at the same time

v3.1.12 (2022-06-11)

• Stop stepping on focusout

v3.1.8 (2022-01-21)

• Updated for Bootstrap 5

v3.1.7 (2021-10-04)

• bugfix change event from document.body

v3.1.2 (2021-10-02)

• Code cleanup

v3.0.3 (2021-09-14)

• no auto-interval with "autoInterval: undefined"

v3.0.2 (2021-05-28)

• Compatible with Bootstrap 5

v2.1.1 (2021-05-14)

• renamed back to bootstrap-input-spinner.js

v2.0.12 (2021-04-29)

• prevent double creation and print warning in console

v2.0.11 (2021-04-26)

• prevent failure, when destroyed element is not an input spinner

v2.0.10 (2021-03-30)

• Fixed Spinner(s) not working properly after changing the value programmatically

v1.17.2 (2021-01-28)

• Right-click on button sends spinner on endless increment/decrement operation

v1.17.0 (2021-01-19)

• set default `keyboardStepping` `true`

v1.16.9 (2021-01-11)

• update

v1.16.8 (2020-10-26)

• little cleanup

v1.16.5 (2020-09-25)

• added locale to props

v1.16.4 (2020-09-17)

• Removed `boostMultiplier` and `data-step-max`

v1.15.4 (2020-09-14)

• updated

v1.14.2 (2020-09-14)

• added more examples

v1.14.1 (2020-09-08)

• Styling with templates

v1.13.20 (2020-08-27)

• Fixed issue with hidden attribute

v1.13.17 (2020-08-02)

• Replaced + and - with the HTML entities + and −

v1.13.16 (2020-07-28)

• Bugs fixed

v1.13.11 (2020-07-21)

• JS Update

v1.13.10 (2020-07-20)

• Fixed "Invalid regular expression" error when thousandSeparator is empty string

v1.13.6 (2020-06-06)

• Allows to destroy the instance

v1.13.4 (2020-04-02)

• Package update

v1.13.3 (2019-12-18)

• Allow enter and space button triggers

v1.12.7 (2019-10-31)

• Allow enter and space button triggers

 

---

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