Menu
Hi there,
I’m currently using a jquery slider but I have one problem I’m trying to correct. The range slider works perfectly but it is a time slider, so I’m trying to edit it so there is a 1hr difference between the range. e.g 9am-10am not 9am-9am. 1pm-2pm not 1pm-1pm.
Can I please get help with this. This is my code so far:
[CODE]
<head>
<link rel=”stylesheet” href=”http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css”/>
<script src=”http://code.jquery.com/jquery-1.10.2.js”></script>
<script src=”http://code.jquery.com/ui/1.11.2/jquery-ui.js”></script>
<link rel=”stylesheet” href=”/resources/demos/style.css”/>
</head>
<body>
<label for=”time”>*Start Time & End Time: <span id=”time” class=”formfont” style=”font-size: 20px;”>9AM – 6PM</span></label>
<br/><br/>
<div id=”time-range” style=”text-align:center; margin:0 auto; width: 200px;”>
<script type=”text/javascript”>
$(“#time-range”).slider({
range: true,
min: 540,
max: 1085.4,
values: [540, 600],
slide: slideTime
});
function slideTime(event, ui){
var val0 = $(“#time-range”).slider(“values”, 0),
val1 = $(“#time-range”).slider(“values”, 1),
minutes0 = parseInt(val0 % 60, 10),
hours0 = parseInt(val0 / 60 % 24, 10),
minutes1 = parseInt(val1 % 60, 10),
hours1 = parseInt(val1 / 60 % 24, 10);
startTime = getTime(hours0, minutes0);
endTime = getTime(hours1, minutes1);
$(“#time”).text(startTime + ‘ – ‘ + endTime);
}
function getTime(hours, minutes) {
var time = null;
minutes = minutes + “”;
if (hours < 12) {
time = “AM”;
}
else {
time = “PM”;
}
if (hours == 0) {
hours = 12;
}
if (hours > 12) {
hours = hours – 12;
}
if (minutes.length == 1) {
minutes = “0” + minutes;
}
return hours + time;
}
slideTime();
</script>
</div>
<br/>
</body>