Input Spinner
A Bootstrap / jQuery plugin to create input spinner elements for number input.
Basic example
Use .input-spinner-wrap .spinner-custom-icon custom icon
<div class="row mb-3">
<div class="col-md-6 col-sm-12 col-12">
<div class="input-spinner-wrap">
<input type="number" class="form-control" value="0" min="0" max="100" step="1" />
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-md-6 col-sm-12 col-12">
<div class="input-spinner-wrap spinner-custom-icon">
<input type="number" class="form-control" value="4.5" data-decimals="2" min="0" max="9" step="0.1" />
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-md-6 col-sm-12 col-12">
<div class="input-spinner-wrap">
<input type="number" class="form-control is-valid" value="4.5" data-decimals="2" min="0" max="9" step="0.1" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12 col-12">
<div class="input-spinner-wrap spinner-custom-icon">
<input type="number" class="form-control is-invalid" value="0" min="0" max="100" step="1" />
</div>
</div>
</div>
<!-- Bootstrap Input spinner JS -->
<script src="vendors/bootstrap-input-spinner/src/bootstrap-input-spinner.js"></script>
$(".input-spinner-wrap input").inputSpinner({});)
Sizing
Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? All good, you can use the browser defaults. Try submitting the form below.
<div class="row mb-3">
<div class="col-md-6 col-sm-12 col-12">
<div class="input-spinner-wrap">
<input type="number" class="form-control-sm" value="10" min="0" max="100" step="1" />
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-md-6 col-sm-12 col-12">
<div class="input-spinner-wrap">
<input type="number" class="form-control" value="10" min="0" max="100" step="1" />
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-md-6 col-sm-12 col-12">
<div class="input-spinner-wrap">
<input type="number" class="form-control-lg" value="80" min="0" max="100" step="1" />
</div>
</div>
</div>