我有一个有点奇怪的请求,允许用户在 slider 上选择范围,但允许他们反转 slider 上的范围选择。例如,如果他们在 slider 上有此选择:
<----[]==========[]---->
他们可以单击按钮并反转该选择。我们希望像这样直观地显示它:
<====[]----------[]====>
slider 将继续按预期工作,但突出显示会反转。我知道您可以通过使用一个 handle 在范围上设置固定的最大值或最小值来对此 slider 执行类似的操作,但不确定当使用两个 handle 时是否可能。有谁知道这是否可以通过 jQuery UI slider 实现?
最佳答案
您可以修改 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>
交换背景。
关于jquery ui slider -- 如何反转范围选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8659679/