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

3

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

1 Like