Create input spinner elements for number input using jQuery + Bootstrap – InputSpinner.js

0 267

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.

Leave A Reply

Your email address will not be published.