Dynamic Min/Max Ranges on Range Slider

Attributes
1

Hi All,
Apologize if this has been answered in the past, but I am wondering if there is a way for the max/min range of my Range Slider to be set dynamically by the CMS, so that it defaults to being the max and min values input to the CMS. Is this possible with some string of code?

Thanks!

2

On that same note, is there a way to only display filters options in a collection list that are actually on the page? That would help really trim down the filter list to only what is available.

3

Any insight here would be super appreciated. Is what I’m asking clear, or do I need to explain it better?

Thanks!

4

Hey @joel!

max/min range of my Range Slider to be set dynamically by the CMS

This could be achieved by Webflow’s native dynamic Attribute you can read more here → Use CMS data in custom attributes | Webflow Features.

is there a way to only display filters options in a collection list that are actually on the page?

Yes! You can use the Attributes API to check which filter options have results and which do not and set the visibility of the filter based on this.

Here are the docs → Attributes API

You can always share a lin to your site if you need help with the code :muscle:

5

Hi Luis, thanks so much for your help. I’m not super handy with code, so I will need some instruction on how to implement the API. Here’s a link to the site I am building:

https://preview.webflow.com/preview/furnie?utm_medium=preview_link&utm_source=designer&utm_content=furnie&preview=afb45f5029d12ad253bf117a5643d1a1&pageId=6566835a2bde4288b4e2f18b&workflow=preview

Here’s the two things I would like to have happen:

  • I want to only show filter options when there are items in the collection list that I am filtering that match those options. So instead of seeing every single “Style” in the styles filter, I only want to see the ones that are currently in the list.

  • For the price and dimensions sliders, I would like to show only the ranges that are in the list. So the highest priced item in the list should be the top range of the slider. I don’t want to have to put arbitrary units in there, if that makes sense.

Thanks for your help!

6

Bumping. Still need help. Thanks

7

hey @joel! This code should work on your end, I’m still chasing a small bug where the minimum value for the range slider is set to 113 instead of 100 with this code, however, you can always comment out the line where the attribute value is modified and leave it at 0.

You’ll need to change the range slider script to

<!-- [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 a class like this to a style tag and add this to the input field

<style>
  .always-visible {
    display: flex !important;
  }
</style>

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsfilter',
    (filterInstances) => {
      console.log('cmsfilter Successfully loaded!');

      const [filterInstance] = filterInstances;
      const filterFields = filterInstance.filtersData;

      function modifyRangeSlider() {
        const furnitureList = document.querySelector('[fs-cmsfilter-element="list"]');
        const rangeSlider = document.querySelector('.filters_rangeslider-wrapper');

        const priceElements = furnitureList.querySelectorAll('[fs-cmsfilter-field="Price"]');
        const prices = Array.from(priceElements).map((priceElement) =>
          parseFloat(priceElement.textContent.trim())
        );

        const minPrice = Math.min(...prices);
        const maxPrice = Math.max(...prices);


        rangeSlider.setAttribute('fs-rangeslider-min', minPrice); // You can comment this line to default the min to 0
        rangeSlider.setAttribute('fs-rangeslider-max', maxPrice);

        window.fsAttributes.rangeslider.init();
      }

      function hideEmptyFilters() {
        filterFields.forEach((filterField) => {
          const elements = filterField.elements;

          elements.forEach((element) => {
            if (element.mode === undefined) {
              element.element.parentElement.style.display =
                element.resultsCount === 0 ? 'none' : 'flex';
            }
          });
        });
      }

      modifyRangeSlider();
      hideEmptyFilters();

      filterInstance.listInstance.on('renderitems', (renderedItems) => {
        hideEmptyFilters();
      });
    },
  ]);
</script>

The tags for the sliders are visible because of this dynamic change, if you want to remove them let me know and I’ll modify the code.