支持“多个范围手柄”的 Jquery 滑块插件 [关闭]答案

【问题标题】：Jquery slider plugin that supports "Multiple Ranged Handles" [closed]支持“多个范围手柄”的 Jquery 滑块插件 [关闭]
【发布时间】：2010-12-04 12:45:35
【问题描述】：

我一直在寻找一个支持多个范围句柄的 Jquery UI 滑块插件。现有的 Jquery UI 滑块仅支持一组值。我正在寻找一个可以有多个范围的滑块。所以一个范围有一个内部范围或两个不重叠的范围。

例子：

R = 句柄

XX = 滑动条

= 或 - = 句柄之间的范围

XXR1-----R1XXR2--R2XXXXXXXXX

XXR1----R2====R2-----R1XXXXXX

XXR1--R2===R2----R3===R3--R1XXXX

我认为没有滑块可以做到这一点？只是想在我去写之前确定一下。

【问题讨论】：

您不能使用多个滑块（每个范围一个）是否有特殊原因？为此，您可以使用它们来约束另一个，因此如果一个在外部范围内，另一个将无法滑过外部设置的限制。

标签： jquery jquery-ui slider

【解决方案1】：

我刚刚发布了Elessar 来填补这个细分市场。 colResizable 很好，但它并不是真正适合这项工作的工具。

【讨论】：

@Matt Brennan 我真的很喜欢这个，但我需要一个没有任何间隙的...而且第一个范围需要修复，可以吗？谢谢！
@tim，恐怕目前不在 Elessar。固定范围已在路线图上，但在我们当前的设计中消除差距将是棘手的。
github 上的兼容性表已经很老了。至少对于 IE11 和 Chrome 44，我可以说，它没有问题。
这是由 testling-ci 生成的，遗憾的是，自 2014 年 6 月以来它已完全被破坏。我有一个悬而未决的问题要转移到 Zuul 和 Saucelabs，我只是没有时间或意愿去做它。

【解决方案2】：

我是这样做的。

myarr = [ 65, 80, 90 ];
$(function() {
    $( "#slider-range" ).slider({
        min: 0,
        max: 100,
        values: myarr,
        slide: function( event, ui ) {
            if ( ui.values[0] >= ui.values[1] ) {
                return false;
            }
            if ( ui.values[1] >= ui.values[2] ) {
                return false;
            }
            $(this).find(".range0").css({ "width": ui.values[0] + "%" });
            $(this).find(".range1").css({ "left": ui.values[0] + "%", "width": (ui.values[1]-ui.values[0])  + "%" }) ;
            $(this).find(".range2").css({ "left": ui.values[1] + "%", "width": (ui.values[2]-ui.values[1]) + "%" }) ;
            $(this).find(".range3").css({ "left": ui.values[2] + "%", "width": (100-ui.values[2]) + "%" }) ;
        },
        create: function(event, ui) {
                $(this).append('<div class="ui-slider-range ui-widget-header range0" style="left: 0%; width: ' + myarr[0] + '%; background: none repeat scroll 0% 0% #CF1920;"></div>');
                $(this).append('<div class="ui-slider-range ui-widget-header range1" style="left: ' + myarr[0] + '%; width: ' + (100-myarr[1]) + '%; background: none repeat scroll 0% 0% #FFE900;"></div>');
                $(this).append('<div class="ui-slider-range ui-widget-header range2" style="left: ' + myarr[1] + '%; width: ' + (100-myarr[2]) + '%; background: none repeat scroll 0% 0% #26CF2D;"></div>');
                $(this).append('<div class="ui-slider-range ui-widget-header range3" style="left: ' + myarr[2] + '%; width: ' + (100-myarr[2]) + '%; background: none repeat scroll 0% 0% #00BCFF;"></div>');
        }
    });
});

我确信它可以进一步优化，但这应该会给你一个大致的想法

【讨论】：