jQuery UI 滑块：具有 3 个手柄和可配置颜色的范围？答案

【问题标题】：jQuery UI Slider: Range with 3 handles, and configurable colors?jQuery UI 滑块：具有 3 个手柄和可配置颜色的范围？
【发布时间】：2011-01-19 04:23:37
【问题描述】：

我想要一个 jQuery UI 滑块，它具有由三个手柄定义的五个不同颜色的范围。（所以第一个范围是句柄 0 - 句柄 1，第二个范围是句柄 1 到句柄 2。）这可以通过配置实现，还是我必须破解它？如果我必须修改源，是否有任何指导方针来指导我如何去做？

更新：我正在寻找的范围是：

| --- 颜色 1 ----- 手柄 1 --------- 颜色 2 ------------- 手柄 2 ------- 颜色 3 ------ ---句柄3 -----颜色4 ----|

（希望这是有道理的。）

【问题讨论】：

也许是这个？ github.com/val-samonte/angular-multirange

标签： javascript jquery jquery-ui

【解决方案1】：

jquery ui 滑块文档中定义的范围选项确实将滑块限制为仅 2 个句柄。当滑块引发 'slide' 或 'change' 事件时，您需要创建多个元素并手动设置这些元素的位置，这样您就可以创建一个具有多个手柄和多个范围的滑块，您可以将自定义 css 应用到这些滑块。有关工作示例，请参见 fiddle。

http://jsfiddle.net/AV3G3/3/

【讨论】：

这太棒了 - 谢谢。我认为在 doUpdate() 方法中应该是 position() 而不是 offset() 有一个小错误。 jsfiddle.net/AV3G3/60 否则滑块会疯狂地埋在真正的应用程序中

【解决方案2】：

您可能想要使用 range slider 并传入一个包含 3 个值的数组来创建 3 个句柄（根据文档）：

滑块小部件将创建句柄类的元素 'ui-slider-handle' 初始化。您可以指定自定义句柄元素通过创建和附加元素并添加“ui-slider-handle” 初始化之前的类。 它只会创建匹配所需的句柄数值/值的长度。为了例如，如果您指定 'values: [1, 5, 18]' 并创建一个自定义句柄，该插件将创建另外两个。

【讨论】：

对，但它说如果range: true，它将强制只有两个滑块。
可能是因为它不知道你想要什么范围。您可以拉下手柄的位置并使用您想出的任何逻辑来确定您的范围（例如，手柄 A 到手柄 B = 范围 1；手柄 B 到手柄 C = 范围 2）。不过，它是有限制的。您可能只想使用两个范围滑块，然后收工。
我已经有一段时间没有玩过滑块了，但我过去用它们做了很多。不过，我从未想过要选择一系列颜色。

【解决方案3】：

如果您不坚持使用 jQuery UI，noUiSlider 可以为范围提供不同的类并支持多个句柄 - 正如您所要求的那样。 This example 演示如何为范围着色。

【讨论】：

值得进一步了解这种“多范围”用途。

【解决方案4】：

修改了onclick reset，请找到完整代码。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Slider functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <style>
      .slide {
    margin-top: 20px;
    margin-left: 20px;
    width: 400px;
    background: red;
}
.slide-back {
    position:absolute;
    height:100%;
}

      </style>
   </head>

   <body>
      <!-- HTML --> 
      <button class="button">submit</button>
      <p>
         <label for = "price">Price range:</label>
         <input type = "text" id = "price" 
            style = "border:0; color:#b9cd6d; font-weight:bold;">
      </p>
      <div id = "slider-3"></div>
   </body>
   <script>

    var doUpdate = function(event, ui) {
        $('#slider-3 .slide-back').remove();
        $($('#slider-3 a').get().reverse()).each(function(i) {
            var bg = '#fff';
            if(i == 1) {
                bg = 'red';
            } else if(i == 2) {
                bg = 'yellow';
            } else if(i == 3) {
                bg = 'green';
            } 

            $('#slider-3').append($('<div></div>').addClass('slide-back').width($(this).offset().left - 5).css('background', bg));

        });
    };
    $(".button").click(function(){
    $('#slider-3').slider({
        slide: doUpdate,
        change: doUpdate,
        min: 0,
        max: 100,
        values: [ 10, 30, 20],
        slide: function( event, ui ) {
                  $( "#price" ).val( ui.values[ 2 ] );
               }
    });
    $( "#price" ).val( $( "#slider-3" ).slider( "values", 0 )
               );
    doUpdate();
       });
    $('#slider-3').slider({
        slide: doUpdate,
        change: doUpdate,
        min: 0,
        max: 100,
        values: [ 10, 30, 20],
        slide: function( event, ui ) {
                  $( "#price" ).val( ui.values[ 2 ] );
               }
    });
    $( "#price" ).val( $( "#slider-3" ).slider( "values", 0 ) );
    doUpdate();


      </script>
</html>

【讨论】：