Question

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

＆LT; ---- [] ========== [] ----＆GT;

他们可以单击按钮并反转该选择。我们希望用这样的方式直观地显示它：

＆LT; ==== [] ---------- [] ====＆GT;

滑块将继续按预期运行，但突出显示相反。我知道你可以用这个滑块做类似的事情，通过一个手柄设置固定的最大值或最小值，但不确定是否可以使用两个手柄。有没有人知道这是否适用于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类，那么你可以将滑块包装在<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>以交换背景。

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

1 个答案: