使用基本的 jQuery 滑块答案

【问题标题】：Working with basic jQuery slider使用基本的 jQuery 滑块
【发布时间】：2016-02-08 19:18:27
【问题描述】：

正如标题所说，我正在尝试在.html 页面上添加一个简单的滑块。

这是我的代码：

$(document).ready(function() {
  // Slider
  $("#slider-range").slider({
    range: true,
    min: 0,
    max: 23,
    values: [0, 23],
    step: 1,
    slide: slideTime
  });
});

function slideTime(event, ui) {
  var val0 = $("#slider-range").slider("values", 0),
    val1 = $("#slider-range").slider("values", 1);
  var text = "";
  if (val0 < 12)
    text += val0 + "AM - ";
  else
    text += val0 + "PM - ";
  console.log(val0);
  console.log(val1);
  if (val1 < 12)
    text += val1 + "AM";
  else
    text += val1 + "PM";
  $("#time").text(text);
}

我面临的问题是范围应该是从 0 到 23。但是，当我使用滑块时，下限又从 1 变为 0，再变为 1... 上界似乎从 22 到 23 再到 22...

我不确定为什么会发生这种情况。

这里可以找到一个最小的例子：

https://jsfiddle.net/7wft437c/

【问题讨论】：

好吧。它不仅如此。将滑块放在沿线的某处。现在拿起它并从它开始的地方在 -1 和 +1 之间来回走动。有时你会去 +1，值会改变 -1，反之亦然。
尝试使用stop:slideTime 或change:.. 而不是slide:slideTime 滑动时调用该函数，但在释放滑块之前该值没有改变。

标签： javascript jquery slider

【解决方案1】：

代替

var val0 = $("#slider-range").slider("values", 0),
val1 = $("#slider-range").slider("values", 1);

这样获取值

var val0 = ui.values[0],
val1 = ui.values[1];

This is the Fiddle

【讨论】：

我正在四处寻找东西并得出了相同的答案（从 jQuery UI 示例开始并继续工作）。我不知道.slider("values", 0) 是什么导致它检索到错误的值，但ui.values[0] 是要走的路。一旦我做出改变，我就得到了奇怪的行为。
@Draco18s 可能 .slider("values",0) 在幻灯片事件中仍然没有正确的值。 Tony 解决方案有效，因为在停止事件中，值刚刚设置，但在幻灯片期间您没有正确的值。
这是有道理的。我还是会亲自走这条路，当元素通过事件方法在盘子上交给你时，不需要 jQuery-select 元素。
但是使用@TonyHinkle 解决方案，如果我调用slideTime();滑块初始化后，我在尝试访问 ui.values[x] 时遇到错误。

【解决方案2】：

您需要将slide: slideTime 更改为stop: slideTime。

slide 获取位置更改之前的状态，并且您的代码设置为在滑动完成时评估滑块的位置。

您也可以在滑块初始化后调用slideTime()，以便在用户触摸之前对其进行标记：

$(document).ready(function() {
  // Slider
  $("#slider-range").slider({
    range: true,
    min: 0,
    max: 23,
    values: [0, 23],
    step: 1,
    stop: slideTime
  });
  slideTime();
});

【讨论】：

但这是一种解决方法，您更改事件，在停止事件中设置值。 JQuery 文档使用 ui 对象来检索特定事件中的值。
@Baro 我同意你的观点，文档确实说要使用 slide 也有一个范围值。我认为滑块功能会在下一个浏览器 tic 或其他东西中检索它的新值。

【解决方案3】：

问题是更新函数在移动后立即触发，在它达到新值之前。

尝试使用change。

或者如果您想在滑动时保持更新，请使用超时：-

function slideTime(event, ui) {
  setTimeout(function() {
    var val0 = $("#slider-range").slider("values", 0),
      val1 = $("#slider-range").slider("values", 1);
    var text = "";
    if (val0 < 12)
      text += val0 + "AM - ";
    else
      text += val0 + "PM - ";
    console.log(val0);
    console.log(val1);
    if (val1 < 12)
      text += val1 + "AM";
    else
      text += val1 + "PM";
    $("#time").text(text);
  }, 100);
}

Fiddle

【讨论】：

【解决方案4】：

在此处查看此工作示例，您可以在其中根据所需的滑块行为定义单独的滑动功能：here

  $("#slider-range").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);
      $('.slider-time').html(hours1 * 100 + minutes1 * 1);
      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;
      }
      var hours2 = Math.floor(ui.values[1] / 60);
      var minutes2 = ui.values[1] - (hours2 * 60);
      $('.slider-time2').html(hours2 * 100 + minutes2 * 1);
      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";
      }
    }
  });

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="time-range">
  <p style='background-color: #be9f57;color:#000;' class='plot-options-font'>Time Range: <span class="slider-time">0000</span> - <span class="slider-time2">2400</span>
  </p>
  <div class="sliders_step1">
    <div id="slider-range"></div>
  </div>
</div>

此外，您可以根据您的要求在跨度或步骤中显示的时间结束时添加 PM 和 AM。

希望这会有所帮助！

【讨论】：

【解决方案5】：

为什么要添加值配置选项。尝试删除它：

 values: [0, 23],

【讨论】：

【解决方案6】：

试试这个解决方案：

function slideTime(event, ui) {
val0 = ui.values[0];
val1 = ui.values[1];

  var text = "";
  if (val0 < 12)
    text += val0 + "AM - ";
  else
    text += val0 + "PM - ";

  if (val1 < 12)
    text += val1 + "AM";
  else
    text += val1 + "PM";
  $("#time").text(text);
}

【讨论】：