A Bootstrap 4 / jQuery plugin to create input spinner elements for number input, by engineering.

License: MIT


The Bootstrap 4 InputSpinner is


This script enables the InputSpinner for all inputs with type='number' on this page. No extra css needed, just Bootstrap 4.

<script src="./src/bootstrap-input-spinner.js"></script>

Repository, documentation and npm package

Find the source code, more documentation and the npm package at


The following contains examples of the InputSpinner's main features

Simple Integer

<input type="number" value="500" min="0" max="1000" step="10"/>

Floating Point

<input type="number" value="4.5" data-decimals="2" min="0" max="9" step="0.1"/>

Handle change and input events and read the value from JavaScript with val()


var $changedInput = $("#changedInput")
var $output = $("#valueOutput")
$changedInput.on("change", function (event) {

Programmatic change of value with val()


Gross (+19%)

$inputNet.on("change", function (event) {
    $inputGross.val($inputNet.val() * 1.19)
$inputGross.on("change", function (event) {
    $inputNet.val($inputGross.val() / 1.19)

Classes is-invalid and is-valid; properties required and placeholder

The classes is-invalid and is-valid of the original input are copied to the created input element. Also required and placeholder are copied.

<input placeholder="Enter a number" required type="number" value="" min="-100" max="100"/>


You can set the group css class via configuration.


$("input.small").inputSpinner({groupClass: "input-group-sm"})


$("input.large").inputSpinner({groupClass: "input-group-lg"})

Attribute 'data-step-max' and looping the value

This Input starts from 0 when reaching 360.

Use the 'data-step-max' attribute to limit the step velocity in HTML.

<input step="1" data-step-max="10" type="number" id="inputLoop" value="0" data-decimals="0" min="-10" max="360"/>

"Loop" the value between 0 and 360 with the 'change' event in JavaScript.

var $inputLoop = $("#inputLoop")
$inputLoop.on("change", function (event) {
    var value = $inputLoop.val()
    value = (value < 0) ? 360 + parseInt(value, 10) : value % 360

Thats all for now

If you like this plugin you may also want to check out our bootstrap-show-modal.

And if you find bugs or have suggestions, you may write an issue.