Fs-rangeslider-element="handle" doesn't initialise in an off-canvas drawer

Attributes
1

Rangeslider handles fail to initialise when nested inside filter drawers that initially start off-canvas transform: translateX(−100%); on page load. Selecting a manual input seems to trigger the slider handles to work normally, as if to reinitialise the component.

The desired behaviour is that the Rangeslider would fully initialise, provided it exists anywhere in the page, in or out of view.

I attempted a workaround, setting the drawer to render (0 opacity) on the stage 300ms after page load via Webflow interactions. This caused issues with pointer events, since the drawer content remains clickable, so it wasn’t ideal.

.filter-drawer {
transform: translateX(0);
opacity: 0;
}

I’m trying a different method, adding an initial class .page-load and removing it once the page loads. This gives control over pointer-events but also causes timing issues with initialising the Rangeslider. Mobile appears to need more time!

.filter-drawer.page-load {
transform: translateX(0);
opacity: 0;
pointer-events: none;
}

Observation: When the Rangeslider is directly on the page (not in a drawer), it loads almost instantly.

2

Hey @Linesy! Thanks for bringing this up!

We are taking a look! :eyes:

3

You’re welcome.

After further testing, this isn’t strictly true. It’s more ‘work occasionally’ than ‘work normally’…

“Selecting a manual input seems to trigger the slider handles to work normally, as if to reinitialise the component.”

4

Temporary Fix

This is working for me, but it feels like a bit of a hack, since load times will probably vary by device and connection…

Initial

<style>
.filter-drawer {
transform: translateX(−100%);
opacity: 0;
}
</style>

Page Load

<style>
.filter-drawer.page-load {
transform: translateX(0);
opacity: 0;
pointer-events: none;
}
</style>

Page Loaded

<script>
document.addEventListener('DOMContentLoaded', () => {
  setTimeout(() => {
    document.querySelectorAll('.filter-drawer').forEach(target => target.classList.remove('page-load'));
  }, 500);
});
</script>

Animated into view

<style>
.filter-drawer {
transform: translateX(0);
opacity: 1;
}
</style>
5

@Support-Luis, I’ve published the site with the temporary fix turned off, so you can see the issue.

6

@Support-Luis OK, this is really bizarre! When implementing scroll lock, I set my drawers to display: none; when off stage. It fixed the problem! I’m guessing there’s an event listener looking for rangesliders when they are not visible?

7

Hey @Linesy! Thank you for all your detailed feedback!

I’ve passed it on to the team to review and check what we can do on our end.

8

No worries at all @Support-Luis, you’re welcome!

I guess it’s not so much a problem, but more an include for the fs-rangeslider documentation: Range sliders nested in drawers should be set to display: none; when off stage, in order to be initialised. Just like it does for drawers using fs-scrolldisable.