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>

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

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.

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

Change min max and value

This is for testing issue #45

$("#buttonTest1").click(function() {
    $("#minMaxValue").attr("min", 11)
    $("#minMaxValue").attr("max", 1000)
    $("#minMaxValue").val(45)
})
$("#buttonTest2").click(function() {
    $("#minMaxValue").attr("min", 1)
    $("#minMaxValue").attr("max", 10)
    $("#minMaxValue").val(5)
})

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.