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

• GitHub repository
• npm package

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

Prefix and Suffix

Prefix

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

Suffix

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

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.