如何将第二个拇指添加到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（...）模块函数中应该包含的结构。至于Dual / Multi-thumb滑块的具体实现，我建议：

1. 从创建包含两个拇指跨度的轨道跨度的renderUI开始（请参阅CONTENT_TEMPLATE并在源中为Y.Slider渲染支持方法）。
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”或“values”，或者“value”可能包含两个其他单独属性之间的增量，例如“minValue”和“maxValue”。还有其他方法可以给那只猫皮肤。
5. 将您的进度和问题带到#yui以帮助您从那里继续。