<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>Form Name</legend>
<div class="form-group">
<div class="input-group input-number text-center">
<div class="input-group-addon">Deposit</div>
<input type="text" value="10000" data-type="number" data-max="10000" data-min="20" data-step="5" class="form-control" id="InputAmount" placeholder="Amount">
<div class="input-group-btn-vertical">
<button class="btn btn-default" type="button">
<i class="fa fa-caret-up"></i>
</button>
<button class="btn btn-default" type="button">
<i class="fa fa-caret-down"></i>
</button>
</div>
</div>
</div>
<!-- Button -->
<div class="form-group center-block">
<div class="text-center">
<button id="singlebutton" name="singlebutton" class="btn btn-primary">Button</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
/*==========================================================================
+ Input-number
==========================================================================*/
.input-number {
width: 300px;
margin-left: -10px;
margin-right: 10px;
&.input-2x {
width: 600px;
}
input {
text-align: center;
margin-left: 0px;
}
input[type=number]{
-moz-appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
}
.input-group-btn-vertical {
position: relative;
white-space: nowrap;
width: 1%;
vertical-align: middle;
margin-left: 10px;
height: 46px;
display: table-cell;
> .btn {
display: block;
float: none;
width: 100%;
max-width: 100%;
margin-left: 0px;
position: relative;
border-radius: 0;
padding-left: 8px;
padding-right: 10px;
&:first-child {
border-top-right-radius: 0px;
}
&:last-child {
margin-top: -2px;
border-bottom-right-radius: 0px;
}
}
i {
position: absolute;
top: 4px;
left: 6px;
}
}
(function($) {
$('body').on('input', ".input-number input[data-type='number']", function(e) {
this.value = this.value.replace(/[^0-9.]/g, '');
if(!this.value){
var min = 10;
if ($(this).data('min')) {
min = parseInt($in.data('min'), 10);
}
$(this).val(min);
}
});
$('body').on('change', ".input-number input[data-type='number']", function(e) {
var $in = $(this);
var min = 10;
var max = 10000;
var step = 1;
if ($in) {
if ($in.data('min')) {
min = parseInt($in.data('min'), 10);
}
if ($in.data('max')) {
max = parseInt($in.data('max'), 10);
}
if ($in.data('step')) {
step = parseInt($in.data('step'), 10);
}
var inputVal = parseInt($in.val(), 10);
if (inputVal > max) {
$in.val(max);
} else if (inputVal < min) {
$in.val(min);
} else if ((inputVal - min) % step != 0) {
$in.val(inputVal - ((inputVal - min) % step));
}
}
});
$('body').on('click', '.input-number .input-group-btn-vertical .btn:first-of-type', function(e) {
var $in = $(this).parents(".input-number:first").find("input[data-type='number']");
var min = 10;
var max = 10000;
var step = 1;
if ($in) {
if ($in.data('min')) {
min = parseInt($in.data('min'), 10);
}
if ($in.data('max')) {
max = parseInt($in.data('max'), 10);
}
if ($in.data('step')) {
step = parseInt($in.data('step'), 10);
}
var val = parseInt($in.val(), 10);
if (val + step <= max)
$in.val(val + step);
}
});
$('body').on('click', '.input-number .input-group-btn-vertical .btn:last-of-type', function(e) {
var $in = $(this).parents(".input-number:first").find("input[data-type='number']");
var min = 10;
var max = 10000;
var step = 1;
if ($in) {
if ($in.data('min')) {
min = parseInt($in.data('min'), 10);
}
if ($in.data('max')) {
max = parseInt($in.data('max'), 10);
}
if ($in.data('step')) {
step = parseInt($in.data('step'), 10);
}
var val = parseInt($in.val(), 10);
if (val - step >= min)
$in.val(val - step);
}
});
}(jQuery));
