Troubleshooting Webflow Slider and Finsweet Range Slider Interaction Issue


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:

Read only link:

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?

      // 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' &&
          ) {

            // Create a <script> element
            let scriptElement = document.createElement('script');
            scriptElement.src =

            // Append the <script> element to the <head> section of the document

            // Stop observing changes once the attribute is removed (optional)

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

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

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

1 Like