在一个滑块中创建多个范围滑块手柄答案

【问题标题】：Create multiple range slide handles in one slider在一个滑块中创建多个范围滑块手柄
【发布时间】：2011-06-16 07:00:31
【问题描述】：

我正在尝试向 jQuery UI 滑块小部件添加多个句柄，例如在一个滑块中添加 2 个或 3 个或更多范围滑块。

我尝试在 google 上搜索，发现一篇文章显示了如何修改它以具有多个句柄，但我需要它们作为范围滑块工作。

有没有办法让这个工作？

$("#slider-range").slider({
    range: true,
    min: 0,
    max: 1439,
    values: [540, 1020],
    animate: true,
    slide: slideTime
});

谢谢

【问题讨论】：

“一个滑块中有 2 个或 3 个或更多范围滑块”——这是什么意思？
我的意思是，一个滑块中有多个范围句柄
如果您需要两个以上的句柄来选择一个范围，您可以考虑使用多个滑块。我什至无法想象如何使用这样的小部件......单个滑块中有多个范围？
我认为您可以在使用 id 的同时使用该类 .. $(".slider-range")
@Hameed：Zack 的意思是，他无法想象一个包含多个范围的滑块会有意义的场景。问题是一个滑块中的多个范围可能会重叠，可能不清楚哪个范围属于哪个参数。

标签： javascript jquery jquery-ui

【解决方案1】：

colResizable 很好，但如果您正在寻找更现代的东西，我写了Elessar 来填补这个确切的位置。

【讨论】：

太棒了！感谢分享这位朋友！我将在一个大项目中使用它，并希望尽快为您的 repo 做出贡献。再次感谢！
“链接”范围是否足够容易。如，没有间隙，当我调整一个大小时，它的兄弟姐妹也会调整大小？（如 colResizable 演示）
虽然理论上这可以回答这个问题，it would be preferable 在这里包含答案的基本部分，并提供链接以供参考。
嗯，“答案的基本部分”是“使用 Elessar”。你认为我还能包括什么？
有一个不错的分叉叫做“时间表”：github.com/zerohun/Timetable。我喜欢它以获得更好的事件支持，例如单击和销毁。

【解决方案2】：

看看colResizable jQuery 插件。它允许您调整表格列的大小并创建多个范围滑块：

【讨论】：

截至 2014 年 8 月，这仍然是工作的最佳工具吗？
我猜它是否是最好的工具还有待商榷，尽管根据github 的说法，它在过去两个月内对其进行了更改，因此它仍有一些积极的发展。
虽然这在理论上可以回答问题，it would be preferable 在这里包含答案的基本部分，并提供链接以供参考。

【解决方案3】：

这是一个扩展 jquery-ui 滑块 功能并允许构建 多范围滑块 http://jsfiddle.net/ladrower/BmQq4/

的包装器

它易于使用。只需传递将包含多范围滑块的 DOM 元素的选择器。

<html>
    <div id="slider"></div>
</html>

<script>
    var intervals = new Intervals("#slider");
</script>

请查看 GitHub https://github.com/ladrower/jquery-ui-intervals 上的文档和源代码

【讨论】：

非常酷的添加 Artem，但为了更好的可用性，我认为加号不是必需的，并且会产生一些混乱（栏中的控件太多）。只需单击空白区域即可创建一个新范围，而不是修改您未指向的范围。我知道可能只有很少的 css 和几行 js 的人可以得到这种行为，但并不是所有人都会这样做。不管怎样，很棒的模组，谢谢:)

【解决方案4】：

我做了编辑。

你可以看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 = $( "<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】：

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();
        }
    },
   //...
 }

然后，当你想调用这些函数时，你就这样做

//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】：

如果你不坚持使用 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];
 }
});

see fiddle!

【讨论】：