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.