"Bootstrap Number Spinner On Click Hold"
Bootstrap 3.2.0 Snippet by wangkj

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
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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">
<div class="col-xs-3 col-xs-offset-3">
<p>Min: -10</p>
<p>Max: 40</p>
</div>
</div>
<div class="row">
<div class="col-xs-3 col-xs-offset-3">
<div class="input-group number-spinner">
<span class="input-group-btn data-dwn">
<button class="btn btn-default btn-info" data-dir="dwn"><span class="glyphicon glyphicon-minus"></span></button>
</span>
<input type="text" class="form-control text-center" value="1" min="-10" max="40">
<span class="input-group-btn data-up">
<button class="btn btn-default btn-info" data-dir="up"><span class="glyphicon glyphicon-plus"></span></button>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-3 col-xs-offset-3">
<p>It's responsive too!</p>
</div>
</div>
</div>
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
/* just for preview */
.container {
padding-top: 40px;
}
@media ( max-width: 585px ) {
.input-group span.input-group-btn,.input-group input,.input-group button{
display: block;
width: 100%;
border-radius: 0;
margin: 0;
}
.input-group {
position: relative;
}
.input-group span.data-up{
position: absolute;
top: 0;
}
.input-group span.data-dwn{
position: absolute;
bottom: 0;
}
.form-control.text-center {
margin: 34px 0;
}
.input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group{
margin-left: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
$(function() {
var action;
$(".number-spinner button").mousedown(function () {
btn = $(this);
input = btn.closest('.number-spinner').find('input');
btn.closest('.number-spinner').find('button').prop("disabled", false);
if (btn.attr('data-dir') == 'up') {
action = setInterval(function(){
if ( input.attr('max') == undefined || parseInt(input.val()) < parseInt(input.attr('max')) ) {
input.val(parseInt(input.val())+1);
}else{
btn.prop("disabled", true);
clearInterval(action);
}
}, 50);
} else {
action = setInterval(function(){
if ( input.attr('min') == undefined || parseInt(input.val()) > parseInt(input.attr('min')) ) {
input.val(parseInt(input.val())-1);
}else{
btn.prop("disabled", true);
clearInterval(action);
}
}, 50);
}
}).mouseup(function(){
clearInterval(action);
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Argon Design System
Simple input spinner controls
Input Spinner with min and max values
Bootstrap Number Spinner

Questions / Comments: