Как добавить второй большой палец к слайдеру Javascript

Question

Мне нужно создать слайдер с двумя большими пальцами, используя библиотеки YUI 3. Существует один ползунок большого пальца , поэтому я надеюсь, что смогу расширить виджет, добавив второй большой палец.

Однако, хотя я могу заниматься базовым программированием на Javascript, это уровень выше, и я даже не знаю, с чего начать. Я несколько недель пытался передать этот проект на аутсорсинг, и не нашел никого, кто был бы готов или способен, поэтому мне кажется, что это зависит от меня и моих навыков Javascript, чтобы решить эту проблему.

Я пытался найти какой-то учебник, но там тоже не повезло. Каждый раз, когда я ищу, как создать «слайдер» с нуля (который, я полагаю, даст мне несколько отправных точек), я получаю инструкции по галереям изображений, которые прокручиваются из стороны в сторону.

Все, что я сейчас знаю, это то, что для расширения библиотеки YUI мне нужно использовать этот код:

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

И я полностью застрял после этого. Я предполагаю, что мне нужно каким-то образом визуализировать div на «рельс», а затем сделать этот div кликабельным и перетаскиваемым ...? Может быть?

Может кто-нибудь дать мне ссылку на учебник или, может быть, указатель на то, как я это делаю?

Answer 1

Структура того, что должно идти в функции модуля YUI.add (...), описана в руководстве пользователя Widget и в примерах.Что касается конкретной реализации ползунка 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 (дважды проверьте имя плагина вСлайдер источника).Это должно привести к двум перетаскиваемым большим пальцам на общей шине.
4. См. Value-range.js в источнике Slider для ссылки на добавление атрибутов min, max и value.Вам решать, как вы хотите сохранить / сообщить значения (ий) для Dual Slider.Например, вы можете оставить один атрибут «значение» или «значения», который содержит массив, или «значение» может содержать дельту между двумя другими отдельными атрибутами, например, «minValue» и «maxValue».Есть и другие способы облысения этого кота.
5. Сообщите вам о прогрессе и вопросах к #yui, чтобы помочь вам в этом.