使用jquery范围滑块过滤div数小时

Question

我有几个小时的滑块，我想根据您的日程安排来过滤div。我希望在滑动滑块时，div会出现和消失，显然取决于它们的值。

我发现这个滑块长达数小时，这确实对我有帮助。滑块用于按时间过滤服务。

是否可以使用此滑块过滤div？

正确的方法是什么？

$("#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>