Question

我已经使用两个处理程序

实现了一个jQuery UI范围滑块

我的JS代码：

$(function() {
                $( "#slider-range" ).slider({
                    range: true,
                    min: 16,
                    max: 99,
                    values: [ 30, 60],
                    slide: function( event, ui ) {
                        if (ui.handle.nextSibling) {                         
                            setTimeout(calculatePos,5);
                            function calculatePos(){
                                $( "#start" ).html( ui.values[ 0 ]).position({
                                    my: 'center',
                                    at: 'top-15',
                                    of: $('.ui-slider-handle:first')                                    
                                });   
                            }                          
                        }
                        else {
                            setTimeout(calculatePos,5);
                            function calculatePos(){                              
                                $( "#end" ).html( ui.values[ 1 ]).position({
                                    my: 'center',
                                    at: 'top-15',
                                    of: $('.ui-slider-handle:last')                                    
                                });                                                  
                            }
                        }       
                    }
                });
              });

现在，我想嵌入一个只有一个手柄的新滑块，它也可以在16到99之间导航。也就是说，我将有三颗子弹。是否有可能实现这一目标并在一个方案中实现两个功能？如果有，怎么样？

Answer 1

我认为这可以帮助你做你想做的事。我没有你的HTML或CSS，所以我只是以jQuery UI Demo为基础。

工作示例：https://jsfiddle.net/Twisty/uw132d6m/3/

<强> HTML

<div class="wrapper">
  <div id="start">
  </div>
  <div id="end">
  </div>
  <div id="slider-range-1" class="low">
  </div>
  <div id="slider-range-2" class="high"></div>
</div>

<强> CSS

.wrapper {
  position: relative;
}

#start,
#end {
  position: absolute;
  font-size: 0.65em;
}

.low {
  position: absolute;
  top: 20px;
  width: 100%;
}

div#slider-range-2.high {
  position: absolute;
  top: 20px;
  border: 0;
  background: transparent;
}

.high .ui-slider-handle {
  width: 10px;
}

<强>的JavaScript

$(function() {
  function calcWidth() {
    var $h1 = $("#slider-range-1 .ui-slider-handle:eq(0)"),
      $h2 = $("#slider-range-1 .ui-slider-handle:eq(1)");
    var w = $h2.position().left - $h1.position().left;
    return w - 36;
  }

  function moveLeft($selector) {
    $selector.position({
      my: "left top",
      at: "right+11 top+5",
      of: "#slider-range-1 .ui-slider-handle:eq(0)"
    });
  }

  $("#slider-range-1").slider({
    range: true,
    min: 16,
    max: 99,
    values: [30, 60],
    slide: function(event, ui) {
      if (ui.handle.nextSibling) {
        setTimeout(calculatePos, 5);

        function calculatePos() {
          $("#start").html(ui.values[0]).position({
            my: 'center',
            at: 'top-15',
            of: ".low .ui-slider-handle:eq(0)"
          });
          moveLeft($("#slider-range-2"));
          $("#slider-range-2").slider("option", "min", ui.values[0]);
          $("#slider-range-2").width(calcWidth())
            .slider("option", "max", ui.values[1]);
        }
      } else {
        setTimeout(calculatePos, 5);

        function calculatePos() {
          $("#end").html(ui.values[1]).position({
            my: 'center',
            at: 'top-15',
            of: ".low .ui-slider-handle:eq(1)"
          });
          $("#slider-range-2").width(calcWidth())
            .slider("option", "max", ui.values[1]);
        }
      }
    }
  });
  $("#slider-range-2").slider({
    min: $("#slider-range-1").slider("values", 0),
    max: $("#slider-range-1").slider("values", 1),
    create: function(e, ui) {
      moveLeft($(this));
      $(this).width(calcWidth());
    }
  });
});

第二个滑块是适合两个范围手柄的位置。如果移动了范围控制柄，则调整第二个滑块以适应，如果需要，您可以以相同的方式调整min，max或step选项。

我怀疑您需要在自己的代码中调整手柄大小等的一些偏移量。

一个方案中的两个jquery ui滑块

1 个答案: