bootstrap-input-spinner

A Bootstrap / jQuery plugin to create input spinner elements for number input, by shaack.com engineering. For now it needs jQuery, but I am working on it.

This version is compatible with Bootstrap 5, but we remain a Bootstrap 4 compatible version with the branch bootstrap4-compatible. npm versions 3.x are Bootstrap 5 compatible, versions 2.x Bootstrap 4 compatible.

License: MIT

Features

The Bootstrap InputSpinner

is mobile friendly and responsive,
has internationalized number formatting,
automatically changes the value when holding a button,
allows setting a prefix or suffix text in the input,
handles val() like the native element,
dynamically handles changing attribute values like disabled oder class,
dispatches change and input events on value change like the native element,
needs no extra css, just Bootstrap 5.

Usage

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

<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

No attributes

<input type="number"/>

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) {
    $valueOnInput.html($(event.target).val())
    // or $valueOnInput.html(event.target.value) // in vanilla js
    // or $valueOnInput.html($changedInput.val())
})
$changedInput.on("change", function (event) {
    $valueOnChange.html($(event.target).val())
})

Programmatic changing the value with `val()`

Net

Gross (+19%)

$inputNet.on("input", function (event) {
    $inputGross.val($(event.target).val() * 1.19)
    // or $inputGross[0].setValue(event.target.value * 1.19) // in vanilla js
    // or $inputGross.val($inputNet.val() * 1.19)
    // do all the same
})
$inputGross.on("input", function (event) {
    $inputNet.val($(event.target).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.

Disabled

<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>
</div>
<script>
    var $inputDisabled = $("#inputDisabled")
    var $disabledSwitch = $("#disabledSwitch")
    $disabledSwitch.on("change", function () {
        $inputDisabled.prop("disabled", $(this).prop("checked"))
    })
</script>

`buttonsOnly` mode and disabled `autoInterval`

In buttonsOnly mode no direct text input is allowed, the text-input gets the attribute readonly. But the plus and minus buttons still allow to change the value.
autoInterval: undefined additionally disables the auto increase/decrease, when you hold the button.

$(".buttons-only").inputSpinner({buttonsOnly: true, autoInterval: undefined})

Dynamically handling of the `class` attribute

CSS Class 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"/>
<script>
    var $inputChangeClass = $("#inputChangeClass")
    var $classInput = $("#classInput")
    $classInput.on("input", function() {
        $inputChangeClass.prop("class", this.value);
    })
</script>

Sizing

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.

Small

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

Large

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

min

max

step

data-decimals

Try here

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

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

Looping the value

This input starts from 0 when reaching 360.

<input step="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("input", function(event) {
    var value = $inputLoop.val()
    value = (value < 0) ? 360 + parseInt(value, 10) : value % 360
    $inputLoop.val(value)
})

Custom Editors

An Editor defines, how the input is parsed and rendered. The inputSpinner is shipped with some custom Editors in /src/custom-editors.js.

RawEditor

The simplest custom Editor is the RawEditor, it renders just the value und parses just the value, without any changes, like a native number input. No internationalization, no digit grouping.

$("#rawEditor").inputSpinner({editor: customEditors.RawEditor})

TimeEditor

The TimeEditor renders the number as time in hours and minutes, separated by a colon.

value:

$("#rawEditor").inputSpinner({editor: customEditors.TimeEditor})

Styling with templates (new!)

With the new templating feature, you can almost do anything, when it comes to layout.

How about... buttons right

This is the template for "buttons right":

<div class="input-group ${groupClass}">
<input type="text" inputmode="decimal" style="text-align: ${textAlign}" class="form-control"/>
<button style="min-width: ${buttonsWidth}" class="btn btn-decrement ${buttonsClass}" type="button">${decrementButton}</button>
<button style="min-width: ${buttonsWidth}" class="btn btn-increment ${buttonsClass}" type="button">${incrementButton}</button>
</div>

You can... or must use the following variables in your template:

${groupClass}
${textAlign}
${buttonsWidth}
${buttonsClass}
${decrementButton}
${incrementButton}

Provide the template as configuration parameter:

$(element).inputSpinner({template: '<div class...'})

Destroying the spinner

To Remove the InputSpinner and show the original input element, use

$(element).inputSpinner("destroy")

Label `for` switches dynamically: