Question

我正在以下列方式使用jQueryUI范围滑块：

$(function() {
    $( "#slider-range" ).slider({
        range: true,
        min: 0,
        max: 4,
        step: 1,
        values: [ 0, 4 ],
        slide: function( event, ui ) {
            $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        }
    });
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
        " - $" + $( "#slider-range" ).slider( "values", 1 ) );
});

我需要做的是 - 当您单击滑块中间时，将右侧拖动器（手柄）移动到单击的位置。目前，当您在中间单击时，左拖动器（手柄）将被拖动到该位置。有没有办法可以改变这种行为？

感谢您的帮助！

Answer 1

这实际上不是它的工作方式，尽管它可能看起来像这样。它实际上检测哪个句柄最近，并选择那个。每次单击时，都会计算与BOTH处理的距离（以像素为单位）。更容易看到更多范围的功能，请看我做的小提琴：http://jsfiddle.net/gm5nm/

这是jQueryUI使用的函数：

this.handles.each(function( i ) {
var thisDistance = Math.abs( normValue - self.values(i) );
if ( distance > thisDistance ) {
distance = thisDistance;
closestHandle = $( this );
index = i;
}
});

来源：Line 249 of jquery.ui.slider.js

总的来说，我认为这是可行的。正确地覆盖它可能有点困难，因为它位于包含一堆逻辑的另一个方法内的匿名函数内。你可能会，我真的真的不推荐它，但你可以修改源，只需设置最接近第二个句柄。但严重的是，不要这样做。这是一个非常糟糕的习惯。

Answer 2

我知道这是一个老问题，但我遇到了同样的问题，并找到了一种更简单的方法来处理它。基本上，您需要在滑块本身上禁用指针事件，在句柄上启用它们，然后附加“点击”按钮。事件到手动移动滑块的容器div。以下是步骤：

假设这个html：

<div class="container-outer">
   <div class="container-inner">
     <div class="jquerySlider">
     </div>
   </div>
</div>

CSS希望如此：

.container-inner {
pointer-events: none;
}

.container-inner .ui-slider .ui-slider-handle {
    pointer-events: auto;
}

你的javascript看起来像这样：

'click .container-outer': function(event) {
   event.preventDefault();
   var clickPosition = event.offsetX;
   var clickPercentage = event.offsetX / event.currentTarget.offsetWidth;
   var sliderMax = $('.jquerySlider').slider("option","max");
   var newPosition = sliderMax * clickPercentage;
   $('.jquerySlider').("values",1,newPosition);
}

好处是你可以避免搞乱jquery代码。此外，手柄上的事件仍可正常运行。

缺点是您必须手动处理滑块单击。但如上所示，这并不难做到。

无论如何，希望这对遇到此问题的其他人有用。

jQuery UI Range Slider - 在滑块中间单击时移动右拖动器（手柄）

2 个答案: