Easy Input Spinner Plugin For Bootstrap 4 - InputSpinner.js

Easy Input Spinner Plugin For Bootstrap 4 - InputSpinner.js

An easy yet customizable input spinner plugin for Bootstrap 4 framework that enables the users to increment/decrement a number by using +/- buttons.

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

<!-- Stylesheet -->
<link rel="stylesheet" 
<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 

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.


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

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

5. Available plugin options to customize the input spinner.

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

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

  • Publication date: 15.03.2018
  • Source