Hi there,
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.
Here some examples: https://www.activecampaign.com/pricing/ and Book a Demo | Hire Aiva (click estimate your monthly costs)
Anyone has a (easy) solution for this?
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hi martijnrunia,
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.
It is unlikely possible (or at least very convenient) to do with default instruments inside the Designer. You may try using library like Rangesliderjs.
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.
From what I can gather I’d need to write a little bit of javascript for this. Any ideas/recommendations how to do this?
@marklovin what library are you using ? Would you have some javascript for us to have a look at ? You’ll have to bind the range’s value to the .style.opacity method value
I don’t think I’m using a library. I haven’t written any javascript yet.
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.
I’m currently watching a tonne of Youtube videos about javascript because I don’t even know where to start, so any help would be really appreciated.
Based on the example you provided, you could simply map your slier’s value to the .style.opacity method of your target element you wish to fade in fade out like so:
target.style.opacity = this.value / 100;
NOTE:
don’t forget to divide the slider value by 100 since opacity CSS rule only accepts range between 0 and 1 (at the moment, the setup of your slider min/max HTML values ranges from 0 to 100).
Javascript
let slider = document.getElementById("myRange");
let target = document.getElementById("target");
// set initial states
target.style.opacity = slider.value / 100;
// update state on input change
slider.oninput = function() {
target.style.opacity = this.value / 100;
};
Here is a quick codepen for you
Hope that helps
Hey thanks!
As for the slider, @anthonysalamin has a great solution!
Thanks for your help! Looking at the codepen you made, it looks like you’ve done exactly what I need but I’m still struggling getting it to work.
Which bit/s of your code do I need to replace with my own target? I tried replacing “target” with the name of the element I want to change the opacity of but it’s not doing anything for me.
By the way what would I change if I wanted to edit hue-rotate instead of opacity?
Sure, to update the hue-rotate you can simply target its hue-rotate css filter using ES6 Template Literal syntax like so:
slider.oninput = function() {
target.style.filter = `hue-rotate(${this.value / 100 * 360}deg)`;
};
First you divide by 100 to get to the smallest unit, then multipy by 360 since the
hue-rotateis based on a 360 degrees value system.
To implement the script, wrap it like so:
<script>
document.addEventListener("DOMContentLoaded", event => {
let slider = document.getElementById("myRange");
let output = document.getElementById("demo");
let target = document.getElementById("target");
// 🧠 set initial states
output.innerHTML = slider.value;
target.style.filter = `hue-rotate(${slider.value / 100 * 360}deg)`;
// 🧠 update state on input change
slider.oninput = function() {
output.innerHTML = this.value;
target.style.filter = `hue-rotate(${this.value / 100 * 360}deg)`;
};
});
</script>
… then copy the script into the custom code section of your page before the end of the body tag </body> Then make sure you add a Webflow id of target to whatever element you’d like to target.
You are an absolute legend! Thank you so much for your help, works perfectly.
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 
Bookmarking everything for later 
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:
HTML
<!-- slider -->
<div class="slidecontainer">
<input type="range" min="0" max="100" value="50" class="slider" id="myRange">
<p>Hue-rotate value: <span id="demo"></span></p>
</div>
<!-- targets -->
<div class="targets"></div>
<div class="targets"></div>
<div class="targets"></div>
<div class="targets"></div>
Javascript
document.addEventListener("DOMContentLoaded", event => {
let slider = document.getElementById("myRange");
let output = document.getElementById("demo");
let targets = document.getElementsByClassName("targets");
let target, i;
// 🧠 set initial states
output.innerHTML = slider.value;
for (i = 0; i < targets.length; i++) {
target = targets[i];
target.style.filter = `hue-rotate(${slider.value / 100 * 360}deg)`;
}
// 🧠 update state on input change
slider.oninput = function() {
output.innerHTML = this.value;
for (i = 0; i < targets.length; i++) {
target = targets[i];
target.style.filter = `hue-rotate(${this.value / 100 * 360}deg)`;
}
};
});
Updated codepen
Hi,
I’m trying to follow these steps to create a slider that shows a specific price based on the number value it is on…
Do you have the codepen for this? The link doesn’t seem to work any more.
Thanks!!