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

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

实际上并不是这样的，尽管看起来可能是这样。它实际上会检测哪个手柄最接近，然后选择那个。每次单击时，都会计算距两个手柄的距离（以像素为单位）。更容易看到更多范围的功能，请参阅我制作的这个小提琴： 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;
}
});

source: jquery.ui.slider.js第249行

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

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 代码。另外，手柄本身上的事件仍然正常运行。

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

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