jquery ui滑块-如何反转范围选择

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 类，那么您可以将滑块包裹在 <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 */
}

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