Troubleshooting Webflow Slider and Finsweet Range Slider Interaction Issue

Attributes
1

Hello,

I have been working on creating a multi-step form utilizing the Webflow Slider component and Finsweet Range Slider.

However, I’ve been facing an issue: the Range Slider is placed on the last slide and seems to be unresponsive. Interestingly, resizing the browser window seems to resolve the issue temporarily, and the slider becomes operational again.

Could you please assist me in identifying what might be causing this behavior?

Live website: https://richworks-ad3d82.webflow.io/reach-calculator

Read only link: https://preview.webflow.com/preview/richworks-ad3d82?utm_medium=preview_link&utm_source=designer&utm_content=richworks-ad3d82&preview=1f7bd37a09a7c24ca85b80c563d95688&pageId=64873034afce47423d6be740&workflow=preview

2

Hey @david1! I believe this is caused by the slider elements being hidden when the script loads.

Can you try adding this code to your page?

<script>
      // Select the target element
      let targetElement = document.querySelector('.fs_rangeslider-1_component');

      // Create a MutationObserver
      let observer = new MutationObserver(function (mutationsList) {
        for (let mutation of mutationsList) {
          if (
            mutation.attributeName === 'aria-hidden' &&
            !targetElement.hasAttribute('aria-hidden')
          ) {

            // Create a <script> element
            let scriptElement = document.createElement('script');
            scriptElement.src =
              'https://cdn.jsdelivr.net/npm/@finsweet/attributes-rangeslider@1/rangeslider.js';

            // Append the <script> element to the <head> section of the document
            document.head.appendChild(scriptElement);

            // Stop observing changes once the attribute is removed (optional)
            observer.disconnect();
            break;
          }
        }
      });

      // Start observing changes to the target element's attributes
      observer.observe(targetElement, { attributes: true, subtree: true });
    </script>

This will detect when the aria-hidden="true" attribute is removed and then load and execute the Range Slider script

1 Like
3

Thank you, Luis. Your solution appears to have effectively addressed the issue!

1 Like
4

Is there an equivalent solution for Attributes V2. I have a filter drawer containing a range slider which is set off canvas (opacity: 0;) before the page loads. Unfortunately, it doesn’t initialise. Instead, I’ve had to use a Webflow animation workaround which isn’t ideal; with the drawers initial state on page load over the canvas (opacity: 0;), returning to it’s closed position, off canvas, with a 300ms delay after page load. This feels flimsy, especially on mobile which is less reliable with loading. Thanks.

5

Hey @Linesy! Could you open a new thread with your read-only link? I’ll check and use that thread to report the bug if needed. Thanks!

1 Like