jQuery UI Slider:具有3个手柄和可配置颜色的范围？

Question

我想要一个jQuery UI滑块,它有五个不同颜色的范围,由三个手柄定义.(所以第一个范围是句柄0 - 句柄1,第二个范围是句柄1来处理2.)这可能通过配置,还是我必须破解它？如果我必须修改源代码,是否有任何指导方针可以执行此操作？

更新:我在范围方面寻找的是:

| ---颜色1 ----- handle1 ---------颜色2 ------------- handle2 ------- color3 ------ --- handle3 -----颜色4 ---- |

(希望这是有道理的.)

Answer 1

jquery ui滑块文档中定义的range选项确实将滑块限制为仅2个句柄.当滑块引发'slide'或'change'事件并手动设置这些元素的位置时,您需要创建多个元素,这样您就可以创建一个具有多个手柄和多个范围的滑块,您可以将自定义css应用到该滑块.请参阅小提琴,了解一个工作示例.

http://jsfiddle.net/AV3G3/3/

Answer 2

您可能想要使用范围滑块并传入 3 个值的数组来创建 3 个句柄（根据文档）：

滑块小部件将在初始化时创建带有“ui-slider-handle”类的句柄元素。您可以通过创建和附加元素并在 init 之前添加“ui-slider-handle”类来指定自定义句柄元素。它只会创建匹配值长度所需的句柄数量。例如，如果您指定“values: [1, 5, 18]”并创建一个自定义句柄，则插件将创建另外两个。