javascript - Bootstrap slider 有 3 个或更多 handle 吗？

Question

快速提问。是否可以使用 bootstrap slider 选择 3 个以上的范围(基本上有 3 个或更多 handle ，而不是默认的 2 个)？

我们的需求发生了变化，之前我们使用了 5 个不同的 slider ，但现在我们想尝试看看是否可以以某种方式将它们合并到一个 slider 本身中。

我希望我可以发布图片，但我没有足够的存储库:P

|----O----O--------O-----O--------|

任何帮助都会很棒。

Answer 1

不幸的是 bootstrap-slider.js 只能“处理”两个句柄。但是noUiSlider可以拥有更多，并且高度可定制。

它无法立即告诉您范围，但您可以通过使用句柄、最小值和最大值进行计数来轻松获得它们，如下所示:

//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!