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,
• allows setting a prefix or a 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.

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 and documentation
• 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()

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>

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>

Dynamically handling of min, max and step

Try here

var $minInput = $("#minInput")
var $maxInput = $("#maxInput")
var $stepInput = $("#stepInput")
var $minMaxTester = $("#minMaxTester")
$minInput.on("change", function (event) {
    $minMaxTester.prop("min", $minInput.val())
})
$maxInput.on("change", function (event) {
    $minMaxTester.prop("max", $maxInput.val())
})
$stepInput.on("change", function (event) {
    $minMaxTester.prop("step", $stepInput.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" />

Sizing

Please note: The sizing changed with version 1.11 from setting the group class in the configuration to automatically use the original elements class.

Sizing now works out of the box. If the original input has the class form-control-sm or form-control-lg, the resulting group gets the class input-group-sm or input-group-lg.

Small

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

Large

<input type="number" class="form-control-lg" value="1000000" data-decimals="0" min="0" max="2000000" step="1"/>

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.