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/bootstrap-input-spinner.js"></script>
<script>
    $("input[type='number']").inputSpinner()
</script>

Repository, documentation and npm package

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

Examples

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

Value:

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

Programmatic change of value with val()

Net

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"/>

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"})

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
    $inputLoop.val(value)
})

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.