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

Question

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

但是，虽然我可以做一些基本的 Javascript 编程，但这是一个更高的级别，我什至不知道如何开始。我已经尝试了数周来外包这个项目，但没有找到任何愿意或有能力的人，所以看起来这取决于我和我的菜鸟 Javascript 技能来解决这个问题。

我一直在尝试寻找某种教程，但也没有运气。每次我寻找如何从头开始构建“滑块”（我认为这会给我一些起点）时，我都会得到关于从一边滚动到另一边的图片库的说明。

我现在只知道要对 YUI 库进行扩展，我需要使用以下代码：

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

在那之后我完全陷入了困境。我假设我需要以某种方式将 div 渲染到“rail”上，然后使该 div 可点击和可拖动......？也许？

谁能给我一个教程的链接或者一个指向我如何做到这一点的指针？

Answer 1

在 Widget 用户指南和示例中描述了 YUI.add(...) 模块函数的结构。至于双/多拇指滑块的具体实现，我建议：

1. 从创建包含两个拇指跨度的轨道跨度的 renderUI 开始（请参阅源代码中 Y.Slider 的 CONTENT_TEMPLATE 和渲染支持方法）。
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。由您决定如何存储/报告 Dual Slider 的值。例如，您可以保留一个包含数组的单个属性“值”或“值”，或者“值”可能包含其他两个单独属性之间的增量，例如“minValue”和“maxValue”。还有其他方法可以剥那只猫的皮。
5. 将您的进度和问题带到#yui，以帮助您从那里继续。