Search code examples
javascriptinterfaceyuislider

How to add a second thumb to a Javascript slider

I have to create a dual-thumb slider using the YUI 3 libraries. A single thumb slider exists, so I hope I can extend the widget to include a second thumb.

However, while I can do some basic Javascript programming, this is a level above and I don't even know how to start. I have tried for weeks to outsource this project, and haven't found anyone willing or capable, so it looks like it is up to me and my noob Javascript skills to solve this.

I have been trying to find some kind of tutorial, but no luck there either. Every time I look for how to build a "slider" from scratch (which I figure will give me some starting points), I get instructions on image galleries that scroll from side to side.

All I know right now is that to make an extension to the YUI library, I need to use this code:

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

And I'm totally stuck after that. I assume that I need to somehow render a div onto the "rail", and then make that div clickable and draggable...? Maybe?

Can someone give me a link to the tutorial or maybe a pointer to how I do this?

Solution

  • The structure of what should go in the YUI.add(...) module function is described in the Widget user guide and examples. As to the particular implementation of a Dual/Multi-thumb slider, I would suggest:

    1. Start with a renderUI that creates a rail span containing two thumb spans (see the CONTENT_TEMPLATE and rendering support methods for Y.Slider in the source).
    2. Give each of these elements class names like yui3-dualslider-rail and yui3-dualslider-thumb-l or -r and apply some basic styling such as dimensions and color so you have some visual feedback of progress.
    3. In the bindUI, create a Y.DD.Drag instance for each of the two thumb spans, and plug them each with the Y.Plugin.DragConstrain (double check the plugin name in the Slider source). This should result in two draggable thumbs on a shared rail.
    4. See the value-range.js in the Slider source to reference adding attributes min and max and value. It's up to you how you want to store/report the value(s) for the Dual Slider. For example, you could keep a single attribute "value" or "values" that held an array, or "value" might contain the delta between two other separate attributes, say "minValue" and "maxValue". There are other ways to skin that cat, too.
    5. Bring you progress and questions to #yui to help proceed from there.