<input type="number" value="500" min="0" max="1000" step="10"/>
<input type="number" value="4.5" data-decimals="2" min="0" max="9" step="0.1"/>
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"})
Value:
changedElement.addEventListener("change", function(event) { // works also with `ìnput` valueOutput.innerHTML = changedElement.value})
Net
Gross (+19%)
inputNet.addEventListener("change", function(event) { inputGross.setValue(inputNet.value * 1.19) // use `setValue` instead of `value=`})inputGross.addEventListener("change", function(event) { inputNet.setValue(inputGross.value / 1.19)})
To enable server-side validation, 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" requiredtype="number" value="" min="-100" max="100"/>
This script enables the InputSpinner for all inputs with type='number' on this page. No extra css needed, just Bootstrap 4.
<script> $("input[type='number']").InputSpinner()</script>