jQuery-UI slider is not showing

Question

I tried a lot of solutions that i found in other questions but none of them solve my problem, i really don't know why my code is not working, there's no errors in console and the jquery and jquery-ui are the latest versions.

References

    <script src="jQuery3.3.1.js" type="text/javascript"></script>

    <link href="jQueryUI1.12.1-darkness.css" rel="stylesheet" type="text/css"/>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
    crossorigin="anonymous" type="text/javascript"></script>

Slider

$("#slider-range").slider({
        range: true,
        min: parseInt(0),
        max: parseInt(1440),
        step: parseInt(15),
        value: parseInt(600),
        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);
                }
            });

CSS

            #time-range p {
                font-family: "Arial", sans-serif;
                font-size: 14px;
                color: #333;
            }
            #slider-range {
                width: 80%;
                margin-bottom: 15px;
            }

HTML

        <div id="time-range">
            <p>Time Range: <span class="slider-time">10:00 AM</span> - <span class="slider-time2">12:00 PM</span>

            </p>
            <div class="sliders_step1">
                <div id="slider-range"></div>
            </div>
        </div>

I really need to fix this fast as posssible!

The JSFiddle here.

Answer 1

Take a look at this code.

 $(function() { function formatTime(h, m, f) { if (f == undefined) { f = true; } var time; if (f) { var fh = (h > 12 ? h - 12 : h); if (h == 24) { fh = 12 } else if (fh == 0) { fh = 12; } time = "" + (fh < 10 ? "0" + fh : fh) + ":" + (m < 10 ? "0" + m : m) + (h > 11 && h != 24 ? " PM" : " AM"); } else { time = "" + (h < 10 ? "0" + h : h) + ":" + (m < 10 ? "0" + m : m); } return time; } $("#slider-range").slider({ range: true, min: 0, max: 24, step: .25, values: [10, 12], slide: function(e, ui) { var times = [{ hour: Math.floor(ui.values[0]) }, { hour: Math.floor(ui.values[1]) }]; times[0].min = (ui.values[0] - times[0].hour) * 60; times[1].min = (ui.values[1] - times[1].hour) * 60; $('.slider-time').html(formatTime(times[0].hour, times[0].min)); $('.slider-time2').html(formatTime(times[1].hour, times[1].min)); } }); }); 

 #time-range p { font-family: "Arial", sans-serif; font-size: 14px; color: #333; } #slider-range { margin-bottom: 15px; } 

 <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/ui-darkness/jquery-ui.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="time-range"> <p>Time Range: <span class="slider-time">10:00 AM</span> - <span class="slider-time2">12:00 PM</span> </p> <div class="sliders_step1"> <div id="slider-range"></div> </div> </div> 

Trying to range between 0 and 2400 is difficult since we're working with cause we're not working with 10, but 60. For example, time is counted like 1400, 1415, 1430, 1445, 1500 but the slider will count like 1400, 1415, 1430, 1445, 1460, 1475, 1490, 1505. So as the slider moves, you're going to get none time values.

+---------------------------------------------+
| x    | h = flour(x / 60) | m = x - (h * 60) |
+---------------------------------------------+
| 600  | 10                | 0                |
| 1215 | 20                | 15               |
| 1360 | 22                | 40               |
+---------------------------------------------+

You can see how this begins to breakdown. Now if you switch percentages of an hour, .25 or 25% of 60 minutes becomes 15 minutes.

+-----------------------------------------+
| x     | h = floor(x) | m = (x - h) * 60 |
+-----------------------------------------+
| 6.00  | 6            | 0                |
| 12.25 | 12           | 15               |
| 13.75 | 13           | 45               |
+-----------------------------------------+

Then you want to format your Hour and Minutes to either a 12 hour format: hh:mm A/PM or a 24 hour format hh:mm . This is pretty easy to do so I moved it to a function of it's own so that you can easily adjust.

Hope this helps.