在一个滑块中创建多个范围的滑块
[英]Create multiple range slide handles in one slider
问题描述
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 谢谢
6 个解决方案
解决方案1
22 2013-11-07 18:55:52
colResizable还不错，但是，如果您要寻找更现代的产品，我写了Elessar来填补这个空白。
解决方案2
13 已采纳 2011-10-31 05:52:45
Take a look at colResizable jQuery plugin. 看一下colResizable jQuery插件。 It allows you to resize table columns and also to create multiple range sliders: 它允许您调整表列的大小并创建多个范围滑块：
解决方案3
5 2013-09-23 13:30:25
This is a wrapper that extends jquery-ui slider functionality and allows to build multi-range slider http://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上查看文档和资源
解决方案4
3 2011-12-10 20:56:36
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 : "" ) );*/
解决方案5
0 2015-03-27 14:24:56
colresizable wasn't right for me, as that was geared more towards tables, I really preferred to use the jquery UI widget, slider. 可colizable不适合我，因为它更适合表，所以我确实更喜欢使用jquery UI小部件“ 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. 所以我只是添加了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");
});
解决方案6
0 2017-05-16 11:38:38
If you don't insist on jQuery UI, also noUiSlider has this capability and is highly customizable. 如果您不坚持使用jQuery UI， 那么noUiSlider也具有此功能并且可以高度自定义。 It can't tell you the ranges rightaway, but you can get them easily from counting with handles, min and max like this: 它无法立即告诉您范围，但是您可以通过使用手柄，最小值和最大值进行计数来轻松获得它们，如下所示：
//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];
}
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.