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分のステップを作りたいです。私はのステップのような多くの側面を試しました：.期待された結果を達成することができませんでした。

同じ

Answer 1

のためのすべてのソリューションを提案してください私の答えは、noUiSliderがスニペット内jqueryのから検出されない理由を私は知らないjqueryのケースを使用すると、それに対処することを願って使用されていません。 ==> 1440分

使用分は、選択の範囲は

• cosider 24時間== 24時間* 60分：

  範囲：{ '分'：0どのように実装され

  、 '最大'：1440}

• フォーマット管ラベルおよびセレクタツールチップ、フォーマットHHを示すためwNumb.jsを使用して：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>