Explore Our Templates 🚀
Input Spinner
This is our custom input spinner, based on react-bootstrap
Basic example
An input number spinner based on React-Bootstrap for React.
<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({});)<template>
<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>
</template><template>
<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>
</template><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>Sizing
Add the relative form input group sizing props size = "sm" | "lg" for additional sizes
<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><template>
<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>
</template><template>
<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>
</template><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>