在一个滑块中创建多个范围滑动手柄
我正在尝试向jQuery UI滑块小部件添加多个句柄，如在一个滑块中的2个或3个或更多范围滑块中。
我试过在谷歌搜索并找到一篇文章，展示如何修改它有多个句柄，但我需要它们作为范围滑块。
反正有没有让这项工作？
$("#slider-range").slider({ range: true, min: 0, max: 1439, values: [540, 1020], animate: true, slide: slideTime }); 谢谢
看一下colResizable jQuery插件。 它允许您调整表列的大小，还可以创建多个范围滑块：
colResizable很好，所有，但如果你正在寻找更现代的东西，我写了Elessar来填补这个确切的利基。
这是一个扩展jquery-ui滑块function的包装器，允许构建多范围滑块 http://jsfiddle.net/ladrower/BmQq4/
它很容易使用。 只需传递包含多范围滑块的DOM元素的选择器。
请查看GitHub上的文档和来源https://github.com/ladrower/jquery-ui-intervals
我做了编辑。
你可以看看http://jsfiddle.net/q5WEe/1/
我编辑了70到82行。
/*edit if ( o.values.length && o.values.length !== 2 ) { o.values = [ o.values[0], o.values[0] ]; }*/ } /*edit this.range = $( "" ) .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 : "" ) );*/
colresizable不适合我，因为它更倾向于表，我真的更喜欢使用jquery UI小部件，滑块。 看起来源代码可以轻松处理多个句柄，他们只是没有真正构建“添加”或“删除”句柄作为一个function。 所以我刚刚添加到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(); } }, //... }
然后，当你想调用这些函数时，就这样做了
//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"); });
如果您不坚持jQuery UI， noUiSlider也具有此function并且可高度自定义。 它无法立即告诉你范围，但是你可以通过手柄，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]; } });
看小提琴！