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

Question

我有一个有点奇怪的请求，允许用户在 slider 上选择范围，但允许他们反转 slider 上的范围选择。例如，如果他们在 slider 上有此选择:

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

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

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

slider 将继续按预期工作，但突出显示会反转。我知道您可以通过使用一个 handle 在范围上设置固定的最大值或最小值来对此 slider 执行类似的操作，但不确定当使用两个 handle 时是否可能。有谁知道这是否可以通过 jQuery UI slider 实现？

Answer 1

您可以修改 CSS，使其看起来像您想要的那样。 slider 的内部:

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

从 .ui-widget-header 获取背景， slider 的外部:

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

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

例如，如果您有这样的 slider :

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

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

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

您可能想跟踪 slider 处于哪种模式，或者您可以只检查 #slider-range .ui-slider-range 上的类。相反。

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

如果您不习惯切换 jQuery-UI 类，那么您可以将 slider 包装在 <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在 wrapper 上<div>交换背景。