如何以 10 分钟的步长设置 noUiSlider？

Question

我一直在使用集成了 noUiSlider 的应用程序。我已经集成了它，并且在 15 分钟 的步骤下工作良好，适用于 24 小时范围的基于时间的滑块，如下所示。

$(".time_range_slider").noUiSlider({
  start : [8, 18],
  behaviour : 'drag',
  connect : true,
  step : .25,
  range : {'min': 0, 'max': 24}
});

$(".time_range_slider").noUiSlider_pips({
  mode : 'steps',
  filter : filter_hour,
  stepped : true
});

function filter_hour(value, type) {
  return ((value * 100) % 100 == 0) ? 1 : 0;
}

但现在我想走 10 分钟。我已经尝试了很多方面，例如 step: .16 但无法达到预期的结果。

请提出相同的解决方案

Answer 1

我的回答没有使用 jquery 案例我不知道为什么没有从 jquery 内部片段中检测到 noUiSlider，希望你能处理这个问题。

实现方式：

考虑 24 小时 == 24 小时 * 60 分钟 ==> 1440 分钟
选择使用分钟范围：

范围：{'min'：0，'max'：1440}
格式化管道标签和选择器工具提示，使用 wNumb.js 显示格式 hh:mm

片段：

var range = document.getElementById('time_range_slider');

range.style.height = '800px';
range.style.margin = '0 auto 30px';

var aproximateHour = function (mins)
{
//http://greweb.me/2013/01/be-careful-with-js-numbers/
 var minutes = Math.round(mins % 60);
  if (minutes == 60 || minutes == 0)
  {
    return mins / 60;
  }
  return Math.trunc (mins / 60) + minutes / 100;
}


noUiSlider.create(range, {
  start : [240, 1080],
  connect: true, 
  direction: 'rtl', 
  orientation: 'vertical', 
  behaviour: 'tap-drag', 
  step: 10,
  tooltips: true,
  range : {'min': 0, 'max': 1440},
  format:  wNumb({
  decimals: 2,
    mark: ":",
  encoder: function(a){
       return aproximateHour(a);
      }
 }),
  pips: {
    mode : 'steps',  
    format:  wNumb({
    mark: ":",
    decimals: 2,
  encoder: function(a ){
        return aproximateHour(a);
      }
  }),
   filter : filter_hour,
   stepped : true,
    density:1
  }
});



function filter_hour(value, type) {
  return (value % 60 == 0) ? 1 : 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/wnumb/1.0.4/wNumb.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/9.1.0/nouislider.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/9.1.0/nouislider.js"></script>
<div id="time_range_slider"></div>

如何以 10 分钟的步长设置 noUiSlider？

How to set noUiSlider with steps of 10 minutes?

jquery

nouislider