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

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

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 necessary jQuery library and Bootstrap framework in the html document.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

2. Load the JavaScript file input-spinner.js after jQuery.

<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.

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

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.

$("input[type='number']").inputSpinner({

  // 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,

  // 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}">' +
    '<div class="input-group-prepend"><button style="min-width: ${buttonsWidth}" class="btn btn-decrement ${buttonsClass} btn-minus" type="button">${decrementButton}</button></div>' +
    '<input type="text" inputmode="decimal" style="text-align: ${textAlign}" class="form-control form-control-text-input"/>' +
    '<div class="input-group-append"><button style="min-width: ${buttonsWidth}" class="btn btn-increment ${buttonsClass} btn-plus" type="button">${incrementButton}</button></div>' +
    '</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:

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)

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 &plus; and &minus;

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.