W3CoreUI

Bootstrap Touchspin

Bootstrap TouchSpin adds stylish and customizable spinbox controls to your input fields for smoother numeric input. Click here

Initialization

Easily set up Bootstrap Touchspin by linking the core library and initializing custom configurations for various input fields.

This is the minified version of the Bootstrap Touchspin library that provides the core masking functionality.

<link src="assets/vendor/bootstrap-touchspin/jquery.bootstrap-touchspin.min.css" rel="stylesheet">
<script src="assets/vendor/bootstrap-touchspin/jquery.bootstrap-touchspin.min.js"></script>

This file contains the custom initialization code to apply Bootstrap Touchspin to specific input fields.

<script src="assets/js/plugins/bootstrap-touchspin-init.js"></script>

Basic Touchspin

Easily enhance number inputs with increment and decrement buttons for better user interaction.


<div class="touchspin-outline">
  <input type="text" class="form-control touchspin-input" value="0" >
</div>

Custom Touchspin

Tweak styles, step values, and behavior to suit your design and user flow needs.


<div class="touchspin-custom">
  <input type="text" class="form-control touchspin-input" value="0" >
</div>

With prefix

Add currency or unit indicators to input values using customizable prefixes for clear context.


<input type="text" value="55" name="touchspinStep" 	
	data-bts-prefix="$"
	data-bts-min="0"
	data-bts-max="100"
	data-bts-step="5">