Dynamic Min/Max Range Filter Sliders

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:

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


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

<!-- [Attributes by Finsweet] CMS Filter -->

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

  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.');
    sliderScript.onload = function () {
      const sliders = document.querySelectorAll('.filters_rangeslider-wrapper');
      if (sliders.length !== 3) {
        console.error(`Expected three sliders but found ${sliders.length}.`);
      const classes = ['.income-value', '.population-value', '.pop-density-value'];
      classes.forEach((valueClass, index) => {
        const values = Array.from(document.querySelectorAll(valueClass), (el) =>

        if (values.length === 0) {
          console.error(`No valid data found for ${valueClass}`);
        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 &&


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