Слайдер jQuery-UI не отображается

Question

Я перепробовал множество решений, которые нашел в других вопросах, но ни одно из них не решило мою проблему, я действительно не знаю, почему мой код не работает, в консоли нет ошибок, а jquery и jquery-ui являются последние версии.

Ссылки

    <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-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>

Мне действительно нужно исправить это как можно быстрее!

JSFiddle здесь.

Answer 1

Посмотрите на этот код.

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

Попытка установить диапазон от 0 до 2400 затруднительна, так как мы работаем с тем, что мы работаем не с 10, а с 60. Например,время считается как 1400, 1415, 1430, 1445, 1500, но ползунок будет считаться как 1400, 1415, 1430, 1445, 1460, 1475, 1490, 1505. Так как ползунок движется, вы не получите ни разузначения.

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

Вы можете видеть, как это начинает разрушаться.Теперь, если вы переключите процентное значение часа, 0,25 или 25% от 60 минут станут 15 минутами.

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

Затем вы захотите отформатировать часы и минуты в 12-часовой формат: hh:mm A/PM или24-часовой формат hh:mm.Это довольно легко сделать, поэтому я переместил его в собственную функцию, чтобы вы могли легко настроить.

Надеюсь, это поможет.