Question

我想要一个jQuery UI滑块，它有五个不同颜色的范围，由三个手柄定义。（所以第一个范围是句柄0 - 句柄1，第二个范围是句柄1来处理2.）这可能通过配置，还是我必须破解它？如果我必须修改源代码，是否有任何指导方针可以执行此操作？

更新：我在范围方面寻找的是：

| ---颜色1 ----- handle1 ---------颜色2 ------------- handle2 ------- color3 ------ --- handle3 ----- color 4 ---- |

（希望这是有道理的。）

Answer 1

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

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

Answer 2

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

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

Answer 3

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

Answer 4

修改为onclick重置，请找到完整的代码。

<!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>

jQuery UI Slider：具有3个手柄和可配置颜色的范围？

4 个答案: