Touchspin
Code Here:
<h5 class="card-title">Normal Touchspin</h5>
<div class="form-group">
<input id="demo3" type="text" value="-1" name="demo3">
</div>
<h5 class="card-title border-top pt-3">Vertical buttons with custom icons</h5>
<div class="form-group">
<input id="demo_vertical2" type="text" value="" name="demo_vertical2">
</div>
<h5 class="card-title border-top pt-3">Button Group</h5>
<form class="form-horizontal mt-3">
<div class="form-group">
<div class="input-group">
<input id="demo5" type="text" class="form-control" name="demo5" value="50">
<div class="btn-group">
<button type="button" class="btn btn-light">Action</button>
<button type="button" class="btn btn-light dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
</div>
</div>
</div>
</div>
</form>
Init Code
$("input[name='demo3']").TouchSpin();
// 2
$("input[name='demo_vertical2']").TouchSpin({
verticalbuttons: true,
verticalupclass: 'glyphicon glyphicon-plus',
verticaldownclass: 'glyphicon glyphicon-minus'
});
// 3
$("input[name='demo5']").TouchSpin({
prefix: "pre",
postfix: "post"
});
Required Files For Touchspin Here
<!-- CSS Here -->
<link rel="stylesheet" type="text/css" href="../../assets/libs/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.min.css">
<!-- Javascript Here -->
<script src="../../assets/libs/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.min.js"></script>