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()

Type in a number to see the difference between change and input events.

Value on input:
Value on change:

var $changedInput = $("#changedInput")
var $valueOnInput = $("#valueOnInput")
var $valueOnChange = $("#valueOnChange")
$changedInput.on("input", function (event) {
$changedInput.on("change", function (event) {

Programmatic changing the 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)

Attributes placeholder and required

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

Attribute disabled, dynamically changing

Attributes are handled dynamically.

<input id="inputDisabled" disabled type="number" value="50"/>
<div class="form-check">
    <input type="checkbox" checked class="form-check-input" id="disabledSwitch"/>
    <label class="form-check-label" for="disabledSwitch">Disabled</label>
    var $inputDisabled = $("#inputDisabled")
    var $disabledSwitch = $("#disabledSwitch")
    $disabledSwitch.on("change", function () {
        $inputDisabled.prop("disabled", $(this).prop("checked"))

Dynamically handling of the class attribute

Try to change the class to "is-invalid" or "text-info".

<input id="inputChangeClass" class="is-valid" type="number" value="50"/>
<label for="classInput">CSS Class</label>
<input id="classInput" type="text" class="form-control" value="is-valid"/>
    var $inputChangeClass = $("#inputChangeClass")
    var $classInput = $("#classInput")
    $classInput.on("input", function() {
        $inputChangeClass.prop("class", this.value);


Sizing works out of the box. Just set the original inputs class to form-control-sm or form-control-lg, and the resulting group gets the class input-group-sm or input-group-lg.


<input class="form-control-sm" type="number" value="0.0" data-decimals="4" min="-1" max="1" step="0.0001"/>


<input class="form-control-lg" type="number" value="1000000" data-decimals="0" min="0" max="2000000" step="1"/>

Dynamically handling of min, max, step and data-decimals

var $minInput = $("#minInput")
var $maxInput = $("#maxInput")
var $stepInput = $("#stepInput")
var $dataDecimalsInput = $("#dataDecimalsInput")
var $minMaxTester = $("#minMaxTester")
$minInput.on("change", function (event) {
    $minMaxTester.attr("min", $minInput.val())
$maxInput.on("change", function (event) {
    $minMaxTester.attr("max", $maxInput.val())
$stepInput.on("change", function (event) {
    $minMaxTester.attr("step", $stepInput.val())
$dataDecimalsInput.on("change", function (event) {
    $minMaxTester.attr("data-decimals", $dataDecimalsInput.val())

Prefix and Suffix


<input data-prefix="$" value="100.0" data-decimals="2" min="0" max="1000" step="0.1" type="number" />


<input data-suffix="°C" value="50" min="0" max="100" type="number" />

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.

<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.