如何將第二個拇指添加到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幫助從那裏開始。