Easy Input Spinner Plugin For Bootstrap 4 - InputSpinner.js

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

An easy yet customizable input spinner plugin (less than 4KB minified) for Bootstrap 4 framework 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 4 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="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:

 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

 v1.12.6 (2019-10-18)

  • Prevent resetting empty value to zero on mutation event

 v1.12.5 (2019-10-15)

  • More update

 v1.12.1 (2019-10-15)

  • Add support to readonly attribute

 v1.11.9/10/11 (2019-09-21)

  • BUG: min max and value change at the same time
  • removed logging

 v1.11.8 (2019-05-16)

  • Fix some locate cannot working on change event

 v1.11.7 (2019-05-15)

  • removed some logging

 v1.11.13 (2019-04-08)

  • reverted type property configuration

 v1.11.12 (2019-04-02)

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

 v1.10.17 (2019-03-11)

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

 v1.10.16 (2019-02-26)

  • JS update

 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.