"Timerange"
Bootstrap 3.3.0 Snippet by Burny0205

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
<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 id="time-range">
<p>Time Range: <span class="slider-time">10:00</span> - <span class="slider-time2">12:00</span>
</p>
<div class="sliders_step1">
<div id="slider-range"></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
#time-range p {
font-family:"Arial", sans-serif;
font-size:14px;
color:#333;
}
.ui-slider-horizontal {
height: 8px;
background: #D7D7D7;
border: 1px solid #BABABA;
box-shadow: 0 1px 0 #FFF, 0 1px 0 #CFCFCF inset;
clear: both;
margin: 8px 0;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
}
.ui-slider {
position: relative;
text-align: left;
}
.ui-slider-horizontal .ui-slider-range {
top: -1px;
height: 100%;
}
.ui-slider .ui-slider-range {
position: absolute;
z-index: 1;
height: 8px;
font-size: .7em;
display: block;
border: 1px solid #5BA8E1;
box-shadow: 0 1px 0 #AAD6F6 inset;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px;
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
$("#slider-range").slider({
range: true,
min: 0,
max: 1440,
step: 15,
values: [600, 720],
slide: function (e, ui) {
var hours1 = Math.floor(ui.values[0] / 60);
if (hours1.length == 1) hours1 = '0' + hours1;
else {
hours1 = hours1;
}
$('.slider-time').html(hours1+ ':00');
var hours2 = Math.floor(ui.values[1] / 60);
if (hours2.length == 1) hours2 = '0' + hours2;
else {
hours2 = hours2;
}
$('.slider-time2').html(hours2 + ':00');
}
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Light Bootstrap Dashboard

Questions / Comments: