Simple jquery+bootstrap based highly customizable input spinner plugin which let you to make number input work like number spinner it support integer and decimal both the format with no extra css needed, only Bootstrap 4 and jQuery. If you have a bootstrap website you can quickly convert your default number input box to input spinner by just including InputSpinner.js library.
Creating input spinner elements for number input
Libraries
Include all the dependent bootstrap + jQuery library and then include plugin library InputSpinner.js on page.
<!--CSS--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <!--JS--> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 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> <script src="InputSpinner.js"></script> |
HTML
Using simple input number box and making it work like spinner. The plugins also support following native HTML5 input number attributes.
- min
- max
- step
- data-decimals
<input type="number" value="500" min="0" max="1000" step="10"/> |
You can also limit the number of decimal places in your input number box.
<input type="number" value="4.5" data-decimals="2" min="0" max="9" step="0.1"/> |
JS
Finally initialize the input spinner by calling the function on the number input element.
<script>
$(function() {
$("input[type='number']").InputSpinner();
});
</script>
|
You can also user following plugins options to customize your input spinner.
<script>
$(function() {
$("input[type='number']").InputSpinner({
decrementButton: "<strong>-</strong>", // button text
incrementButton: "<strong>+</strong>", // ..
groupClass: "input-group-spinner", // css class of the input-group
buttonsClass: "btn-outline-secondary",
buttonsWidth: "2.5em",
textAlign: "center",
autoDelay: 500, // ms holding before auto value change
autoInterval: 100, // speed of auto value change
boostThreshold: 15, // boost after these steps
boostMultiplier: 2
});
});
</script>
|
See live demo and download source code.
DEMO | DOWNLOAD
Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.
