Dynamic Min/Max Range Filter Sliders

Attributes
1

Hi there,
I am trying to build out a filterable table for a client, and I would really like my min/max sliders to be dynamic, rather than me manually determining values for them. I tried to get ChatGPT to write me a script to do this, and it sorta accomplished its goal, but the min/max values are eliciting odd behavior.

Instead of treating those min/max values as defaults, they are seen as filters, therefore adding filter tags upon first load. You can see that when you load the page here:
https://campaign-for-fair-housing-elements.webflow.io/

Can someone pop into my shared project and examine the script to see if there’s a cleaner way to do this?

https://preview.webflow.com/preview/campaign-for-fair-housing-elements?utm_medium=preview_link&utm_source=designer&utm_content=campaign-for-fair-housing-elements&preview=b8f6715926d753908fbae3629fb5deaa&workflow=preview

2

hey @joel1! You will need to use this script for CMS Filter

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

I refactored the code and this should do the trick of dynamically setting the min and max values for the three sliders and then initializing the filtering without applying the filters

<script>
  document.addEventListener('DOMContentLoaded', function () {
    window.fsAttributes = window.fsAttributes || [];

    const sliderScript = document.querySelector('script[src*="finsweet/attributes-rangeslider"]');
    if (!sliderScript) {
      console.error('Slider script not found.');
      return;
    }
    sliderScript.onload = function () {
      const sliders = document.querySelectorAll('.filters_rangeslider-wrapper');
      if (sliders.length !== 3) {
        console.error(`Expected three sliders but found ${sliders.length}.`);
        return;
      }
      const classes = ['.income-value', '.population-value', '.pop-density-value'];
      classes.forEach((valueClass, index) => {
        const values = Array.from(document.querySelectorAll(valueClass), (el) =>
          parseFloat(el.textContent.trim())
        ).filter(Number.isFinite);

        if (values.length === 0) {
          console.error(`No valid data found for ${valueClass}`);
          return;
        }
        const minVal = Math.min(...values);
        const maxVal = Math.max(...values);
        sliders[index].setAttribute('fs-rangeslider-min', minVal.toString());
        sliders[index].setAttribute('fs-rangeslider-max', maxVal.toString());
        window.fsAttributes &&
          window.fsAttributes.rangeslider &&
          window.fsAttributes.rangeslider.init();

        window.fsAttributes.cmsfilter.init();
      });
    };
  });
</script>

Let me know if there is anything else you’d like to add!