Step 1
Be sure to keep all the classnames, or update them in your code. They are required for this input to function.
Step 2
Add the following CSS to your page or site settings. Place the on the page to preview changes
CUSTOM CSS
Step 3
Change the styling of these elements right in Webflow. To style the handle and hover states edit the custom CSS.
Step 4
Last, and most importantly, you need to add the following code before the closing </body> tag.
<!--🟢 RANGE SLIDERS 🟢-->
<script>
function rangeSlider() {
var sliders = document.querySelectorAll('.ms-range-slider'); sliders.forEach(function(slider) {
var range = slider.querySelector('.ms-range-slider-bar'),
value = slider.querySelector('.ms-range-slider-value'); value.innerHTML = range.value; range.addEventListener('input', function() {
value.innerHTML = this.value;
});
});
}rangeSlider();
</script>
Step 4 - Option B
If you want to use this feature with Memberstack you'll want to use this code instead. You only need one or the other.
<!--🟢 RANGE SLIDERS W/ MEMBERSTACK 🟢-->
<script>
function rangeSlider() {
var sliders = document.querySelectorAll('.ms-range-slider'); sliders.forEach(function(slider) {
var range = slider.querySelector('.ms-range-slider-bar'),
value = slider.querySelector('.ms-range-slider-value'); value.innerHTML = range.value; range.addEventListener('input', function() {
value.innerHTML = this.value;
});
});
}// Check if Memberstack is available
if (typeof window.$memberstackDom !== 'undefined') {
// Get the current Memberstack member
window.$memberstackDom.getCurrentMember().then(({ data: member }) => {
if (member) {
let id = member.id;
// Memberstack member found, initialize range sliders
rangeSlider();
} else {
// Memberstack member not found, initialize range sliders
rangeSlider();
}
});
} else {
// Memberstack not available, initialize range sliders
rangeSlider();
}
</script>
Credits
The Simple Range Slider project by Adam Whitten