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

时间:2012-02-15 17:35:46

标签: jquery jquery-ui jquery-ui-draggable

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

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

感谢您的帮助!

2 个答案:

答案 0 :(得分: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

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

答案 1 :(得分:1)

我知道这是一个老问题,但我遇到了同样的问题,并找到了一种更简单的方法来处理它。基本上,您需要在滑块本身上禁用指针事件,在句柄上启用它们,然后附加“点击”按钮。事件到手动移动滑块的容器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代码。此外,手柄上的事件仍可正常运行。

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

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