如何设置noUiSlider 10分钟的步骤？

我一直在使用已集成的应用程序noUiSlider。我已经整合了它，并且与步骤15分钟一起工作良好，其时间范围为24小时，如下所示。如何设置noUiSlider 10分钟的步骤？

$(".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分钟一步。我已经尝试了很多方面，如步骤：.16但无法达到预期效果。

请建议我的答案是不使用jquery情况下，我不知道为什么不从jQuery的内部片段检测noUiSlider为同一

来源

2016-12-14 Jeet

是不是没有确定这是否帮助或没有，但是不是你缺少'（）'您'过滤器：filter_hour（）< - '你也不要输入任何值到'filter_hour（价值缺失）' –

@CarstenLøvboAndersen我已经按照这个链接https://refreshless.com/nouislider/pips/#section-steps – Jeet

@Jeet检查我的答案是否能解决您的问题。 – SilentTremor

任何解决办法，希望你能面对这一切。

如何被实现：

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

范围：{ '分钟'：0 ， '最大'：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({ 
 
\t \t decimals: 2, 
 
    mark: ":", 
 
\t \t encoder: function(a){ 
 
     return aproximateHour(a); 
 
     } 
 
\t }), 
 
    pips: { 
 
    mode : 'steps', 
 
    format: wNumb({ 
 
    mark: ":", 
 
    decimals: 2, 
 
\t \t encoder: function(a){ 
 
     return aproximateHour(a); 
 
     } 
 
\t \t }), 
 
    \t filter : filter_hour, 
 
    \t 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>

来源

2016-12-16 16:09:10 SilentTremor

非常感谢。你救了我的日子。 – Jeet

如何设置noUiSlider 10分钟的步骤？

回答

相关问题