<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>
/* 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 */
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 40px;
height: 18px;
border: none;
border-radius: 12px;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #529de1), color-stop(100%, #245e8f)); /* android <= 2.2 */
background-image: -webkit-linear-gradient(top , #529de1 0, #245e8f 100%); /* older mobile safari and android > 2.2 */;
background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */
}
input[type="range"]::-moz-range-thumb {
width: 40px;
height: 18px;
border: none;
border-radius: 12px;
background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */
}
input[type="range"]::-ms-thumb {
width: 40px;
height: 18px;
border-radius: 12px;
border: 0;
background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */
}
input[type="range"][disabled] {
cursor: not-allowed;
}
$("input[type='range']").change(function() {
$(this).next('span').html(this.value);
}).change();
