Comment ajouter un deuxième curseur à un curseur Javascript

Question

Je dois créer un curseur double-pouce en utilisant les bibliothèques YUI 3. A single thumb slider exists, donc j'espère que je peux étendre le widget pour inclure un deuxième pouce.

Cependant, bien que je puisse faire de la programmation Javascript basique, c'est un niveau supérieur et je ne sais même pas comment démarrer. J'ai essayé pendant des semaines d'externaliser ce projet, et je n'ai trouvé personne de prêt ou capable, donc il semble que c'est à moi et à mes compétences Javascript de noob de résoudre ce problème.

J'ai essayé de trouver une sorte de tutoriel, mais pas de chance non plus. Chaque fois que je cherche comment construire un "curseur" à partir de zéro (dont je pense qu'il me donnera quelques points de départ), je reçois des instructions sur les galeries d'images qui défilent d'un côté à l'autre.

Tout ce que je sais est en ce moment que pour faire une extension à la bibliothèque YUI, je dois utiliser ce code:

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

Et je suis tout à fait coincé après. Je suppose que je dois en quelque sorte rendre un div sur le "rail", puis rendre ce div cliquable et draggable ...? Peut être? Est-ce que quelqu'un peut me donner un lien vers le tutoriel ou peut-être un pointeur sur la façon dont je fais cela?

Answer 1

La structure de ce qui devrait être dans la fonction du module YUI.add (...) est décrite dans le guide utilisateur de Widget et les exemples. Quant à la mise en œuvre particulière d'un double/curseur multi-pouce, je suggère:

1. Commencez avec un renderUI qui crée une travée de rail contenant deux travées de pouce (voir les méthodes de soutien CONTENT_TEMPLATE et de rendu pour Y.Slider en la source). Donnez à chacun de ces éléments des noms de classe comme yui3-dualslider-rail et yui3-dualslider-thumb-l ou -r et appliquez un style de base tel que les dimensions et la couleur afin d'avoir un aperçu visuel de la progression.
2. Dans le fichier bindUI, créez une instance Y.DD.Drag pour chacun des deux segments de pouce et branchez-les chacun avec Y.Plugin.DragConstrain (vérifiez le nom du plugin dans la source Slider). Cela devrait entraîner deux pouces draggable sur un rail partagé.
3. Voir la valeur-range.js dans la source Slider pour référencer l'ajout d'attributs min et max et la valeur. C'est à vous de décider comment vous voulez stocker/déclarer la (les) valeur (s) pour le Dual Slider. Par exemple, vous pouvez conserver un seul attribut "value" ou "values" qui contient un tableau, ou "value" peut contenir le delta entre deux autres attributs séparés, par exemple "minValue" et "maxValue". Il y a d'autres façons de peau ce chat, aussi.
4. Apportez des progrès et des questions à #yui pour aider à partir de là.