Easy Input Spinner Plugin For Bootstrap 4 - InputSpinner.js

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

5. 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 
  
});

Change log:

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.