bootstrap-input-spinner

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

License: MIT

Features

The Bootstrap 4 InputSpinner is

• mobile friendly and responsive,
• automatically changes value when holding button, boosts value change when holding button longer,
• has internationalized number formatting,
• handles val() like the native element,
• and dispatches change and input events on value change like the native element.

Usage

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

<script src="./src/InputSpinner.js"></script>
<script>
    $("input[type='number']").InputSpinner()
</script>

Repsitory, documentation and package

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

• GitHub repository
• npm package

Examples

The following contains examples of all Bootstrap 4 InputSpinners main features

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

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

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

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

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

Sizing

You can set the group css class via configuration.

Small

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

Large

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