2 Draggable Range Sliders on same page

[ektorp]

Hi - I am in need of a draggable range slider. Searching through the great Greensock forums, I found an example that fits my base need quite nicely. The extra enhancement I need is to basically have 2 of the range sliders on the page where the interaction with one will affect and update the other - basically, an onscreen duplicate. For this, I believe I would just need to loop through the 2 elements and create the Draggables. Where I have gotten it so far is if you drag any of the 2nd bottom knobs it updates the 1st top range slider as needed. But if you click the 2nd bottom range bar it only properly updates the 1st top. And if you drag the 1st top knobs, it only affects the top range slider. I am not sure if Draggable is not looped correctly to make the necessary updates or if something else is being missed with the Draggable set up. Again, I just need 2 of the exact same range sliders on the page where an interaction with one will properly update the other. Any help and assistance with this is greatly appreciated.

Here is the original example if there is a simpler way to duplicate the range slider.

See the Pen NWaEeBY by bdang (@bdang) on CodePen

See the Pen vYRjbYJ by bdang (@bdang) on CodePen

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "here is my list of requirements ____, please show me how to build it" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

If it were me, I'd structure things very differently - I'd create a class that handles ONE of those range sliders, and then create as many instances as you need (two in this case). Expose methods for setting/getting the various values/properties that are critical. Let the class dispatch change events when a drag happens, for example, and that can call a function that just loops through all the instances and sets the values accordingly. That way, you don't have to give unique IDs to each one, manually handle all the communication for each and every one, hard-wire it all. Just use a clean class structure that has clearly delineated responsibilities and leverage the power of object oriented programming. 

 

That's just my 2 cents. Keep the change. 

 

We just don't have the resources to dig through hundreds of lines of code and create a custom solution for you based on your requirements. But we're happy to answer any GSAP-specific questions. 

 

You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

[iDad5]

Assuming, that the actual value you need is set/read only from one source anyhow, and not wanting to go into all the details of missing/not working cross-linked event-listeners, my suggestion would be to use CSS custom properties onDrag that all sliders are connected to. Percentages would even give you high flexibility. 

[iDad5]

Had another idea: A option there would be combining two range sliders  <input type="range"> visually into one. In modern browsers to my experience there is a good chance of getting the desired look and fallbacks are not too hard to implement. Linking both would need javascript event-listeners but if accessibility is a concern for you that could probably be the best option. 

 

(You can make controls you built with gsap accessible, butt doing _ in your case - might require some extra effort...)

[ektorp]

Thank you team Greensock for the feedback and tips. This definitely got me pushed in the direction I needed. Thanks again.