jQuery UI范围滑块-在滑块中间点击右拖拽器（手柄）

我以以下方式使用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 ) );
});

我需要做的是当你在滑块中间点击右边的拖拉（手柄）到点击的位置。当前，当你在中间点击时，左边的拖拽（手柄）被拖到那个位置。我有没有办法改变这种行为

---

谢谢你的帮助

这实际上不是它的工作原理，尽管它可能看起来是这样的。它实际上检测哪个句柄最近，并选择那个句柄。每次单击时，都会计算与两个控制柄的距离（以像素为单位）。更容易看到范围更广的功能，请看我制作的小提琴：

以下是jQueryUI使用的函数：

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

资料来源：

---

总的来说，我认为这是有用的。正确重写它可能有点困难，因为它在另一个包含大量逻辑的方法中的匿名函数中。你可以，我真的不推荐，但是你可以修改源代码，把最近的句柄设置为第二个。但说真的，不要那样做。这是一个非常糟糕的习惯。

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

假设这个html：

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

您的javascript如下所示：

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

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

'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代码。此外，句柄上的事件本身仍能正常工作

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

---

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

你好，乔纳森。滑块似乎不会移动最近的拖动器。您可以在这个jsFiddle中看到这一点：如果您试图将右侧的dragger/句柄移动到第二个点，您将无法做到这一点。右侧牵引器将到达第三点并在那里停止。然后，如果您甚至单击非常靠近右拖动器/手柄的位置，左拖动器将移动。你能给我一个如何解决这个问题的提示吗？@cycero问题是你只有4个可能的值。没有什么需要修复的，它工作正常，即使有4个值，它仍然可以正常工作。谢谢。但我需要通过单击滑块使右拖动器/手柄到达第二个点。现在，当右拖动器到达第三点时，它会在那里停顿，如果您甚至在右拖动器非常近的位置单击，左拖动器将移动到第二点。根据逻辑-最近的拖动器应该在单击时移动。因为您只有4个点，在第二次单击时，它们都是并列的“最近的”。我认为逻辑在只有4个点的情况下运行得不是很好，因为它们是标准化的。但这不是一件容易改变的事情。你必须重写我在上面发布的那篇文章，正如我所说的，这是一个匿名函数，在一个非常大的逻辑片段中。