jQuery UI的范围滑块 - 在滑块

我使用jQueryUI的范围滑块以下列方式中间点击时移动右牵引（手柄）：jQuery UI的范围滑块 - 在滑块

$(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)); 
});

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

感谢您的帮助！

来源

2012-02-15 cycero

这实际上并不是如何工作的，尽管它可能会出现这种情况。它实际上检测哪个句柄是最接近的，并选择那个句柄。每次单击时，都会计算出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

在一般情况下，我认为这是可用。正确地覆盖它可能有点困难，因为它在另一个包含一堆逻辑的方法内部的匿名函数中。你可以，而且我真的不太推荐它，但是你可以修改源代码并设置最接近第二个的句柄。但严重的是，不要这样做。这是一个非常糟糕的习惯。

来源

2012-02-15 19:17:23

谢谢乔纳森！ – cycero 2012-02-15 19:41:11

嗨乔纳森。滑块似乎不会移动最近的拖动器。你可以在这个jsFiddle中看到它：http://jsfiddle.net/dZ7Yg/如果你尝试将右边的拖动器/句柄移动到第二点，那么你将无法做到这一点。正确的拖拉机将达到第三点并停在那里。然后，如果您甚至点击非常靠近右侧拖动器/手柄，则左侧拖动器将移动。你能给我一个关于如何解决这个问题的提示吗？ – cycero 2012-02-17 21:56:34

@cycero问题是你只有4个可能的值。没有什么可以解决的，它工作得很好，即使有4个值，它仍然可以正常工作。 – 2012-02-17 22:04:01

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

假设这个网站：

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

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

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

来源

2016-07-06 00:18:28 Hashcut

jQuery UI的范围滑块 - 在滑块

回答

相关问题