How to Create Input Spinner Elements for Number Input | bootstrap-input-spinner

How-to-Create-Input-Spinner

Bootstrap 4 jQuery plugin to create input spinner elements for number input. A straightforward but customizable enter spinner plugin for the BS4 framework that permits the customers to increment/decrement a quantity by using plus/minus buttons.

Advantages

  • Mobile-friendly and responsive.
  • Automatically changes value when the button is pressed and promotes value change when the button is pressed for a longer time.
  • It has an international digital format.
  • It allows setting a prefix or suffix text in the entry.
  • Handles val () like the parent element.
  • Dynamically handles variable attribute values such as disrupted order class.
  • It sends change and entry events on the change of value as the original item.

How to make use of it:

Installation:

# NPM
$ npm install bootstrap-input-spinner --save

1. Load the mandatory jQuery library and Bootstrap 4 framework within the HTML doc.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="" crossorigin="anonymous"></script>

2. Load the JavaScript file InputSpinner.js after jQuery.

<script src="InputSpinner.js"></script>

3. Create a traditional quantity enter for the enter spinner. The plugin helps native enter attributes similar to value, min, max and step.

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

4. Initialize the enter spinner by calling the perform on the number entered.

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

5. If you need to restrict the variety of decimal locations:

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

6. Max step is supported as effectively:

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

7. Available plugin options to customize the enter 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: "auto",

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

8. Event handlers:

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

9. Change the value programmatically:

instance.setValue(new value)

10. Destroy the instance.

instance.destroy()

Easy Input Spinner Plugin For Bootstrap 4, Bootstrap Touchspin Input Spinner, Bootstrap Input Spinner Github


See Demo And Download

Official Website(shaack): Click Here

This superior jQuery/javascript plugin is developed by shaack. For extra Advanced Usages, please go to the official website.