A client is asking for an element which I’ve never created or seen on a Webflow page. What it needs to do is you have a (number) bar slider on the left and content on the right. When I slide on the bar the content on the right changes.
Did you end up finding a solution to this? I’m trying to achieve something similar and I can’t find any other mention of it in the forums. Every other mention of sliders on here refers to the type where you click to cycle through slides, which makes it even harder to find answers.
In theory it seems simple. It’s basically the same as a scroll interaction, only instead of the scroll being the trigger, I’d like to trigger events based on the position of a draggable element.
Hey dram, thanks for replying. I was reading your guide to custom cursors the other day, very helpful guide!
I’ve made some good progress with setting up the range slider exactly how I’d like it in Webflow using the html embed, it’s draggable and works as I had hoped. All it’s missing now is I need to somehow link the position of the draggable element to the opacity of another element.
What I’ve done so far is copied this into a html embed element and made some minor changes to how it looks. What I’m struggling with is how to get that to actually affect the opacity of another element.
Sorry, one more question… I just noticed that an ID can only apply to one element, so what would be the best way of applying the same effect to multiple elements? Would I need to somehow change it to affect a class instead of an ID, and apply that class to all elements I want to affect, or can I add in multiple ID’s?
Edit: actually ignore this, I just figured it out. You just have to put all your elements inside a div with an ID of ‘target’ and it will affect all of them
You are absolutely right, you would need to switch to class selector instead of id. Your solution to group your targets inside a single “target” id element is a good idea. However, in some situation where you can’t group elements within a single element, you’d want to target the elements themselves individually using their class attribute within a simple for loop function like so: