"Number Input Buttons with Min/Max"
Bootstrap 3.0.0 Snippet by ImGuss

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="row">
<div class="col-sm-3"></div>
<div class="col-sm-2">
<label>First</label> <!-- purely semantic -->
<div class="form-control input-sm center merge-bottom-input" name="first">0</div>
<div class="btn-group btn-block" role="group" aria-label="plus-minus">
<button type="button" class="btn btn-sm btn-danger minus-button merge-top-left-button" disabled="disabled"><span class="glyphicon glyphicon-minus"></span></button>
<button type="button" class="btn btn-sm btn-success plus-button merge-top-right-button"><span class="glyphicon glyphicon-plus"></span></button>
</div><!-- end button group -->
</div> <!-- end column -->
<div class="col-sm-2">
<label>Second</label>
<div class="form-control input-sm center merge-bottom-input" name="second">0</div>
<div class="btn-group btn-block" role="group" aria-label="plus-minus">
<button type="button" class="btn btn-sm btn-danger minus-button merge-top-left-button" disabled="disabled"><span class="glyphicon glyphicon-minus"></span></button>
<button type="button" class="btn btn-sm btn-success plus-button merge-top-right-button"><span class="glyphicon glyphicon-plus"></span></button>
</div><!-- end button group -->
</div> <!-- end column -->
<div class="col-sm-2">
<label>Third</label>
<div class="form-control input-sm center merge-bottom-input" name="third">0</div>
<div class="btn-group btn-block" role="group" aria-label="plus-minus">
<button type="button" class="btn btn-sm btn-danger minus-button merge-top-left-button" disabled="disabled"><span class="glyphicon glyphicon-minus"></span></button>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.center {
text-align: center;
}
.merge-bottom-input {
width: 67px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.merge-top-left-button {
border-top-left-radius: 0;
}
.merge-top-right-button {
border-top-right-radius: 0;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready( () => {
$('.minus-button').click( (e) => {
// change this to whatever minimum you'd like
const minValue = 0
const currentInput = $(e.currentTarget).parent().prev()[0];
let minusInputValue = $(currentInput).html();
if (minusInputValue > minValue) {
minusInputValue --;
$($(e.currentTarget).next()).removeAttr('disabled');
$(currentInput).html(minusInputValue);
if (minusInputValue <= minValue) {
$(e.currentTarget).attr('disabled', 'disabled');
}
}
});
$('.plus-button').click( (e) => {
const maxValue = 10
const currentInput = $(e.currentTarget).parent().prev()[0];
let plusInputValue = $(currentInput).html();
if (plusInputValue < maxValue) {
plusInputValue ++;
$($(e.currentTarget).prev()[0]).removeAttr('disabled');
$(currentInput).html(plusInputValue);
if (plusInputValue >= maxValue) {
$(e.currentTarget).attr('disabled', 'disabled');
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Argon Design System
plus minus counter input
Simple input spinner controls

Questions / Comments: