Javascript 在一个滑块中创建多个范围滑块手柄
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6368206/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create multiple range slide handles in one slider
提问by hilarl
I am trying to add multiple handles to a jQuery UI slider widget, as in 2 or 3 or more range sliders in one slider.
我正在尝试向 jQuery UI 滑块小部件添加多个句柄，例如在一个滑块中包含 2 个或 3 个或更多范围滑块。
I have tried searching on google and found an article that shows how to modify it to have multiple handles but I need them to work as range sliders.
我尝试在 google 上搜索并找到了一篇文章，该文章展示了如何将其修改为具有多个句柄，但我需要它们作为范围滑块工作。
Is there anyway to make this work?
有没有办法让这项工作？
$("#slider-range").slider({
range: true,
min: 0,
max: 1439,
values: [540, 1020],
animate: true,
slide: slideTime
});
Thanks
谢谢
采纳答案by Alvaro Prieto Lauroba
Take a look at colResizable jQueryplugin. It allows you to resize table columns and also to create multiple range sliders:
看看colResizable jQuery插件。它允许您调整表格列的大小并创建多个范围滑块：
回答by Kara Brightwell
回答by Artem Platonov
This is a wrapper that extends jquery-ui sliderfunctionality and allows to build multi-range sliderhttp://jsfiddle.net/ladrower/BmQq4/
这是一个扩展jquery-ui 滑块功能并允许构建多范围滑块的包装器http://jsfiddle.net/ladrower/BmQq4/
It is easy to use. Just pass the selector of DOM element that will contain a multi-range slider.
这个用起来很简单。只需传递将包含多范围滑块的 DOM 元素的选择器。
<html>
<div id="slider"></div>
</html>
<script>
var intervals = new Intervals("#slider");
</script>
Please, check out the documentation and sources at GitHub https://github.com/ladrower/jquery-ui-intervals
请查看 GitHub https://github.com/ladrower/jquery-ui-intervals 上的文档和来源
回答by misima
I did edit.
我做了编辑。
You can look to http://jsfiddle.net/q5WEe/1/
你可以看看http://jsfiddle.net/q5WEe/1/
I did edit line 70 to 82.
我确实编辑了第 70 到 82 行。
/*edit
if ( o.values.length && o.values.length !== 2 ) {
o.values = [ o.values[0], o.values[0] ];
}*/
}
/*edit
this.range = $( "<div></div>" )
.appendTo( this.element )
.addClass( "ui-slider-range" +
// note: this isn't the most fittingly semantic framework class for this element,
// but worked best visually with a variety of themes
" ui-widget-header" +
( ( o.range === "min" || o.range === "max" ) ? " ui-slider-range-" + o.range : "" ) );*/
回答by Max
colresizable wasn't right for me, as that was geared more towards tables, I really preferred to use the jquery UI widget, slider. It looked like the source code could easily handle multiple handles, they just hadn't really built 'adding' or 'removing' handles live as a feature. So I just added to the source code of jquery UI Slider (a bit scary...I know) but works pretty well.
colresizable 不适合我，因为它更适合表格，我真的更喜欢使用 jquery UI 小部件滑块。看起来源代码可以轻松处理多个句柄，他们只是没有真正构建“添加”或“删除”句柄作为一项功能。所以我只是添加到 jquery UI Slider 的源代码中（有点吓人......我知道）但效果很好。
var slider = $.widget("ui.slider", $.ui.mouse, {
version: "1.11.4",
widgetEventPrefix: "slide",
//...
value: function(newValue) {
// ...
},
values: function(index, newValue) {
// ...
},
//new function to allow creation of handles
//you can add your own code to handle arguments or something for placing
//the new handle in a specific spot
addHandle: function() {
//adds a new handle
this.options.values.push(this._trimAlignValue((this._valueMax() - this._valueMin()) / 2));
this._refresh();
},
//new function to allow deleting handles
//currently just takes the last value off, but you can make it fancier
removeHandle: function() {
//only remove a handle if there are more than 1 handles
if (this.options.values.length > 1) {
this.options.values.pop();
this._refresh();
}
},
//...
}
Then, when you want to call these functions, you do it like so
然后，当你想调用这些函数时，你这样做
//when your 'add handle' button is clicked
$("#btn-add").click(function(){
//call the add handle function you made within the slider widget
$( "#slider" ).slider("addHandle");
});
$("#btn-remove").click(function(){
$( "#slider" ).slider("removeHandle");
});
回答by Fanky
If you don't insist on jQuery UI, also noUiSliderhas this capability and is highly customizable. It can't tell you the ranges rightaway, but you can get them easily from counting with handles, min and max like this:
如果你不坚持使用 jQuery UI，那么 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];
}
});
