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" 
      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 
  
});

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