Easy Input Spinner Plugin For Bootstrap 4 - InputSpinner.js

Easy Input Spinner Plugin For Bootstrap 4 - InputSpinner.js
File Size: 9.92 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.

How to use it:

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

<!-- Stylesheet -->
<link rel="stylesheet" 
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
      crossorigin="anonymous">

<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
        crossorigin="anonymous"></script>

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.

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

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

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

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

  // boost after these steps
  boostThreshold: 15, 

  // boost multiplier
  boostMultiplier: 2,

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

7. Event handlers:

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

8. Change the value programmatically:

instance.setValue(new value)

Changelog:

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)

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.