Question

快速提问。是否可以使用引导滑块选择3个以上的范围（基本上有3个或更多的句柄，而不是默认的2个）？

我们对需求进行了更改，我们之前使用过5个不同的滑块，但现在我们想尝试看看是否可以将它们合并为一个滑块本身。

我希望我能发布一张照片，但我没有足够的回购：P

| ---- ----öø--------ö----- -------Ò|

任何帮助都会很棒。

Answer 1

不幸的是，bootstrap-slider.js可以＆＃34;处理＆＃34;只有两个手柄。但是noUiSlider可以拥有更多，并且可以高度自定义。

它无法立即告诉您范围，但您可以轻松地通过手柄，min和max进行计数，如下所示：

//get array of connect elements (ranges)
var connect = multirange.querySelectorAll('.noUi-connect');

multirange.noUiSlider.on('update', function () {
 var valuesarr = multirange.noUiSlider.get(),
 max = multirange.noUiSlider.options.range.max[0],
 oldsum = multirange.noUiSlider.options.range.min[0];// = slider min, will be usually 0

 for ( var i = 0; i < connect.length; i++ ) {
     if(valuesarr[i]) $(connect[i]).text(valuesarr[i] - oldsum);
     else $(connect[i]).text(max - oldsum);
     oldsum=valuesarr[i];
 }
});

see fiddle!

带有3个或更多手柄的Bootstrap滑块？

1 个答案: