如何将第二个拇指添加到Javascript滑块

Question

我必须使用YUI 3库创建双拇指滑块。 A single thumb slider exists，所以我希望我可以扩展小部件以包含第二个大拇指。

但是，虽然我可以做一些基本的Javascript编程，但这是上面的一个级别，我甚至不知道如何开始。我已经尝试了几个星期外包这个项目，并没有找到任何人愿意或有能力，所以它看起来取决于我和我的noob Javascript技能来解决这个问题。

我一直在试图找到某种教程，但没有运气那里。每次我从头开始寻找如何构建“滑块”（我会给出一些出发点），我会得到关于从一侧到另一侧滚动的图像库的说明。

所有我现在知道的是，做一个扩展YUI库，我要使用此代码：

YUI.add('gallery-dual-slider', function (Y) { /* custom code goes here */ }, '0.0.1', { requires: ['dd-drag'] }); 

而且我以后完全卡住。我假设我需要以某种方式将一个div渲染到“轨道”上，然后使该div可点击并拖动...？也许？

有人可以给我一个链接到教程或可能是一个指向我如何做到这一点？

Answer 1

Widget用户指南和示例中描述了YUI.add（...）模块函数应该执行的结构。至于具体的实施双/多拇指滑块，我建议：

1. 开始与创建包含两个拇指跨越铁路跨度（见在Y.Slider的CONTENT_TEMPLATE和渲染支持方法renderUI来源）。
2. 为yui3-dualslider-rail和yui3-dualslider-thumb-l或-r这些元素赋予类名称，并应用一些基本样式（如尺寸和颜色），以便获得进度的一些视觉反馈。
3. 在bindUI中，为两个拇指跨度中的每一个创建一个Y.DD.Drag实例，并使用Y.Plugin.DragConstrain插入它们（仔细检查Slider源代码中的插件名称）。这应该会在共享导轨上产生两个可拖动的大拇指。
4. 请参阅Slider源中的value-range.js以引用添加属性min和max和value。这取决于您想要如何存储/报告双Slider的值。例如，您可以保留包含数组的单个属性“值”或“值”，或者“值”可能包含两个其他单独属性（例如“minValue”和“maxValue”）之间的增量。还有其他方法可以使那只猫变白。
5. 让你的进步和问题#Yui帮助从那里开始。