javascript - noUiSlider 使用 libLink 自定义格式化时间

Question

自定义格式加上 noUiSlider 中时间值的 libLink 对我来说不起作用。

我想使用 slider 以 24 小时格式输出时间(例如 17:32)。

我还想输入有效时间并通过 libLink 更新 slider 。

当我移动 slider 时，输入中的时间会正确更新。但反之则不行:在输入中输入新时间，然后取消聚焦会将输入重置为之前的值。

如果您取消注释函数 HHMMtoMinutes() 中的 console.log，您可以看到它触发了两次。这里发生了什么？

$(document).ready(function() {

  $(".slider").noUiSlider({
    start: ["07:30"],
    range: {
      'min': 0,
      'max': 24 * 60
    },
    format: {
      to: minutesToHHMM,
      from: HHMMtoMinutes
    }
  });

  $(".slider").Link("lower").to($("#time"));

});

function minutesToHHMM(value) {
  value = Math.round(value);
  var hour = Math.floor(value / 60);
  var min = value - hour * 60;
  //console.log("value:" + value + "\thour: " + hour + "\tmin: " + min)
  return ("0" + hour).slice(-2) + ":" + ("0" + min).slice(-2);
}

function HHMMtoMinutes(value) {
  var split = value.toString().split(":");
  var hour = parseInt(split[0]) * 60;
  var min = parseInt(split[1]);
  //console.log("value: " + value + "\thour: " + hour + "\tmin " + min);
  return hour + min;
}

<link href="https://refreshless.com/nouislider/source/distribute/jquery.nouislider.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://refreshless.com/nouislider/source/distribute/jquery.nouislider.all.js"></script>

<div style="width:80%; margin:80px 0 0 100px">
  <div class="slider"></div>
  <form style="margin-top:20px">
    <label for="time">time</label>
    <input type="text" id="time" name="time" />
  </form>
</div>

这里还有一个 JSFiddle:https://jsfiddle.net/g42e6saf/2/

Answer 1

它运行两次因为libLink needs to use要更新的 slider .val() 方法。在链接上设置格式可以解决您的问题。

$(".slider").noUiSlider({
    start: [ 0 ],
    range: {
        'min': 0,
        'max': 24 * 60
    }      
});

$(".slider").Link("lower").to($("#time"), null, {
    to: minutesToHHMM,
    from: HHMMtoMinutes
});

Updated fiddle .