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,
• 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 4.

Usage

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

<script src="./src/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 and documentation
• npm package

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($changedInput.val())
})
$changedInput.on("change", function (event) {
    $valueOnChange.html($changedInput.val())
})

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

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

buttonsOnly mode (New!)

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.

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

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

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

Custom Editors (new!)

An Editor defines, how the input is parsed and rendered. The inputSpinner is shipped with some custom Editors in /src/input-spinner-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. It looks like this:

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

TimeEditor

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

$("#rawEditor").inputSpinner({editor: inputSpinnerCustomEditors.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}">
<div class="input-group-prepend"></div>
<input type="text" inputmode="decimal" style="text-align: ${textAlign}" class="form-control"/>
<div class="input-group-append">
<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></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")

If you find bugs or have suggestions, you may write an issue.