jquery ui slider - 如何反转范围选择

Question

我有一个奇怪的请求,允许用户选择滑块上的范围,但允许它们反转滑块上的范围选择.例如,如果他们在滑块上有这个选择:

<---- [] ========== [] ---->

他们可以单击按钮并反转该选择.我们想像这样直观地显示它:

<==== [] ---------- [] ====>

然后滑块将继续按预期运行,但突出显示相反.我知道你可以用这个滑块做类似的事情,通过一个手柄设置固定的最大值或最小值,但不确定是否可以使用两个手柄.有谁知道这是否适用于jQuery UI滑块？

Answer 1

您可以使用CSS来使其看起来像您想要的那样.滑块的内部:

<----[]==========[]---->
       ^^^^^^^^^^

从.ui-widget-header滑块的外部获取其背景:

<----[]==========[]---->
 ^^^^              ^^^^

得到它的背景.ui-widget-content.因此,要反转它们,您只需要toggleClass在窗口小部件上作为一个整体(对于外部背景)和拇指(对于内部区域)切换这些类.外部区域只是滑块本身,内部区域是.ui-slider-range滑块内部.

例如,如果您有这样的滑块:

<div id="slider-range"></div>

然后你可以用这个反转背景:

$('#slider-range, #slider-range .ui-slider-range').toggleClass('ui-widget-header ui-widget-content');

您可能想要跟踪滑块位于某个位置的模式,或者您可以只检查类#slider-range .ui-slider-range.

演示:http://jsfiddle.net/ambiguous/Mu8XS/

如果你不习惯切换jQuery-UI类,那么你可以将滑块包装在a中<div>,在其上切换一个类<div>,并覆盖jQuery-UI CSS:

.inverted .ui-widget-content {
    /* The usual background properties for .ui-widget-header */
}
.inverted .ui-widget-header {
    /* The usual background properties for .ui-widget-content */
}

然后你可以.inverted在包装器<div>上切换以交换背景.