具有 3 个或更多手柄的引导滑块？答案

【问题标题】：Bootstrap slider with 3 or more handles?具有 3 个或更多手柄的引导滑块？
【发布时间】：2014-05-13 21:23:05
【问题描述】：

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

我们的需求有所改变，之前我们使用 5 个不同的滑块，但现在我们想尝试看看是否可以以某种方式将它们合并到一个滑块本身。

我希望我可以发布一张图片，但我没有足够的 repo :P

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

任何帮助都会很棒。

【问题讨论】：

什么引导滑块？我在默认文件中没有看到。
我的意思是 bootstrap-slider.js。默认情况下不包括此项。 eyecon.ro/bootstrap-slider
使用两个句柄意味着范围的开始和结束——两个端点。在这种情况下，五个句柄是没有意义的。您可以询问插件作者，但我会坚持使用五个单独的滑块。

标签： javascript jquery twitter-bootstrap slider

【解决方案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!

【讨论】：