jQuery-UI滑块未显示

Posted 2021-03-31

我尝试了很多我在其他问题中找到的解决方案，但没有解决我的问题，我真的不知道为什么我的代码不起作用，控制台中没有错误，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在这里。

答案

看看这段代码。

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

以上是关于jQuery-UI滑块未显示的主要内容，如果未能解决你的问题，请参考以下文章

滑块未显示所有图像

引导滑块未在 iphone 6、移动设备上显示工具提示

Slick.js：滑动滑块未正确拖动（快速回到第一张幻灯片）

slider.goToNextSlide() 滑块未定义 bxSlider

Material-UI 滑块未将名称道具暴露给 Formik

单击滑块轨道时获取 Jquery-UI 滑块值？