Range slider not draggable/working in fixed filter modal

Attributes
1

Hello guys,
i have tried to use the range slider but its not working in a position fixed element. i have moved the range slider outside of the element and it worked normally.
The range slider is only working and draggable if i use it in element inspect

https://home-up.webflow.io/dev/range-slider

2

Hey @aardigamsterdam! We need to have the slider elements visible on the page for the script to recognize them correctly. We can fix this by delaying the Attributes Script until the user opens the modal.

For this please add the defer fs-attributes-preventload='true' to the Range Slider script.

To initialize this script I’ve come up with two options

  • Detect changes to the opacity/display of the background overlay with this code
<script>
  const targetElement = document.querySelector('.filters_modal-background-overlay');

  const observer = new MutationObserver((mutationsList) => {
    for (const mutation of mutationsList) {
      if (mutation.type === 'attributes') {
        const { style } = mutation.target;
        if (style.display === 'block' && style.opacity === '1') {
          // The filter modal is open, initiate your script here
          window.fsAttributes.rangeslider.init();
          observer.disconnect();
        }
      }
    }
  });

  const config = { attributes: true, attributeFilter: ['style'] };

  observer.observe(targetElement, config);
</script>
  • Or wait for the transition of the menu to finish with this code
<script>
  const targetElement = document.querySelector('.filters_modal-content-wrapper');
  const observer = new MutationObserver((mutationsList) => {
    for (const mutation of mutationsList) {
      if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
        const { style } = mutation.target;
        if (
          style.transform ===
          'translate3d(0vw, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg)'
        ) {
          window.fsAttributes.rangeslider.init();
          observer.disconnect();
        }
      }
    }
  });

  const config = { attributes: true, attributeFilter: ['style'] };
  observer.observe(targetElement, config);
</script>

Either option should be added to the /body custom code field on your page settings.

Let me know if this fixes it! :muscle:

3

Thank you for repling @Support-Luis

i have added the preventload in my head

<!-- [Attributes by Finsweet] Range Slider -->
<script defer fs-attributes-preventload="true" src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-rangeslider@1/rangeslider.js"></script>

and the script in 

<script>
  const targetElement = document.querySelector('.filters_modal-content-wrapper');
  const observer = new MutationObserver((mutationsList) => {
    for (const mutation of mutationsList) {
      if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
        const { style } = mutation.target;
        if (
          style.transform ===
          'translate3d(0vw, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg)'
        ) {
          window.fsAttributes.rangeslider.init();
          observer.disconnect();
        }
      }
    }
  });

  const config = { attributes: true, attributeFilter: ['style'] };
  observer.observe(targetElement, config);
</script>

both scripts gives me the same outcome,

The range slider is not draggable but is now filled for the half like in webflow editor.

First it was filled 100% before preventload.

this is the link:
https://home-up.webflow.io/dev/range-slider

4

You seem to have an embed script that uses the same variables that I did not see before. This breaks the code I sent, changing the variables will fix it.

Can you try this code?

<script>
  const targetModalElement = document.querySelector('.filters_modal-content-wrapper');
  const changeObserver = new MutationObserver((mutationsList) => {
    for (const mutation of mutationsList) {
      if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
        const { style } = mutation.target;
        if (
          style.transform ===
          'translate3d(0vw, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg)'
        ) {
          window.fsAttributes.rangeslider.init();
          observer.disconnect();
        }
      }
    }
  });

  const configuration = { attributes: true, attributeFilter: ['style'] };
  changeObserver.observe(targetModalElement, configuration);
</script>
5

Thank you!

1 Like
6

@Support-Luis is it poissbly to open the modal after executing the script without the active tags of the range slider.

Scherm­afbeelding 2023-08-31 om 17.19.33

7

Hey @aardigamsterdam! I am afraid we currently can not select which filter elements will have tags associated to them. Maybe some JS can fix this, can you please reshare the link where the solution is live?

8

https://home-up.webflow.io/koop

9

@aardigamsterdam when would you like to hide the tags? Always? Until a search is done? Only if the values are different than the starting ones?

1 Like
10

when opening the page, and opening the filter after a milesecond the tags of the range slider comes up. i dont want that

11

@Support-Luis

1 Like