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

Posted 2023-02-22

【中文标题】jquery ui滑块-如何反转范围选择

【英文标题】：jquery ui slider -- how to invert the range selection

【发布时间】：2012-01-29 09:19:31

【问题描述】：

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

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

滑块将继续按预期工作，但突出显示反转。我知道你可以用这个滑块做类似的事情，方法是用一个手柄在范围上设置一个固定的最大值或最小值，但不确定当使用两个手柄时是否有可能。有谁知道这是否可以通过 jQuery UI 滑块实现？

【参考方案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 以交换背景。

【讨论】：

@Ben：我希望你宁愿正确设置 CSS 而不是运行脚本来切换类...但这是最好的解决方案，你可以在视觉上将范围样式设置为看起来像 range-reject 滑块。 +1 给穆...

罗伯特，我必须用代码来做。用户将使用按钮切换选择，因此必须在单击事件中发生。 Mu 的解决方案非常适合我的需要。谢谢。

@Ben：您还可以在单​​击处理程序中的包装器<div> 上添加或删除inverted 类，然后您可以使用第二种方法。什么都行。