Tengo un slider por horas, con el cual me gustaría filtrar div dependiendo de su horario ej:
$("#slider-container2").slider({
range: true,
min: 0,
max: 1440,
step: 15,
values: [0, 1440],
slide: function (e, ui) {
var hours1 = Math.floor(ui.values[0] / 60);
var minutes1 = ui.values[0] - (hours1 * 60);
if (hours1.length == 1) hours1 = '0' + hours1;
if (minutes1.length == 1) minutes1 = '0' + minutes1;
if (minutes1 == 0) minutes1 = '00';
if (hours1 >= 12) {
if (hours1 == 12) {
hours1 = hours1;
minutes1 = minutes1 + " PM";
} else {
hours1 = hours1 - 12;
minutes1 = minutes1 + " PM";
}
} else {
hours1 = hours1;
minutes1 = minutes1 + " AM";
}
if (hours1 == 0) {
hours1 = 12;
minutes1 = minutes1;
}
$('.slider-time').html(hours1 + ':' + minutes1);
var hours2 = Math.floor(ui.values[1] / 60);
var minutes2 = ui.values[1] - (hours2 * 60);
if (hours2.length == 1) hours2 = '0' + hours2;
if (minutes2.length == 1) minutes2 = '0' + minutes2;
if (minutes2 == 0) minutes2 = '00';
if (hours2 >= 12) {
if (hours2 == 12) {
hours2 = hours2;
minutes2 = minutes2 + " PM";
} else if (hours2 == 24) {
hours2 = 11;
minutes2 = "59 PM";
} else {
hours2 = hours2 - 12;
minutes2 = minutes2 + " PM";
}
} else {
hours2 = hours2;
minutes2 = minutes2 + " AM";
}
$('.slider-time2').html(hours2 + ':' + minutes2);
}
});
.red1 {
background-color:red;
color:white;
margin-top: 20px;
}
.green1 {
background-color:green;
color:white;
margin-top: 20px;
}
.yellow1 {
background-color:yellow;
color:black;
margin-top: 20px;
}
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<span class="slider-time">10:00 AM</span> - <span class="slider-time2">12:00 PM</span>
<br><br>
<div id="slider-container2"></div>
<br><br>
<div class="red1" data-hour="7:00am">
7:00 AM
</div>
<div class="green1" data-hour="1:45pm">
1:45 PM
</div>
<div class="yellow1" data-hour="6:30pm">
6:30 PM
</div>
¿Cual sería la manera correcta de realizarlo?