"HTML5 input range"
Bootstrap 3.3.0 Snippet by calvin52019

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
<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="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>HTML5 Input Range</h2>
</div>
<div class="row">
<div class="col-md-8">
<form action="#" method="post">
<input type="range" class="form-control" /><span></span>
<br><br>
<input type="range" class="form-control" value="20" /><span></span>
<br><br>
<input type="range" class="form-control" disabled /><span></span>
</form>
</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
32
33
34
35
36
37
/* input range */
input[type="range"] {
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
width: 90%;
height: 20px;
margin: 0;
border: none;
padding: 1px 2px;
border-radius: 14px;
background: #232528;
box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;
-webkit-box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;
outline: none; /* no focus outline */
}
input[type="range"]::-moz-range-track {
border: inherit;
background: transparent;
}
input[type="range"]::-ms-track {
border: inherit;
color: transparent; /* don't drawn vertical reference line */
background: transparent;
}
input[type="range"]::-ms-fill-lower,
input[type="range"]::-ms-fill-upper {
background: transparent;
}
input[type="range"]::-ms-tooltip {
display: none;
}
/* thumb */
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
$("input[type='range']").change(function() {
$(this).next('span').html(this.value);
}).change();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Material Dashboard PRO
plus minus counter input
Simple input spinner controls
Custom Search input

Questions / Comments: