Min - max values on range slider

Attributes
1

Hello @Support-Luis ,
I am using the range slider on a page it works great but I would need help on the following:
My minimum is set to 0 my max to 50000
when you arrive to 50k it should show >50k and not “stop” on 50k.
And maybe the same for the lower end. Instead of “0" I would like to see <500.

how can I achieve that?

This is my preview link Webflow - Bigblue - Fulfillment for customer centric brands

Thanks a lot for your help

2

Hey @anais! On which page do you have the filtering setup?

3

on this one https://bigblue-production.webflow.io/archives/new-pricing

however i am having some issues now it seems some of the scripts i’m using on the page are not loading at all not sure what happened because i didn’t change anything and it was working fine this morning @Support-Luis

EDIT: seems the jquery issues from last night got solved. But still got my initial question from this topic ^^

4

hey @anais! Great to hear that the jQuery issues were solved!

Quick question. Is this only a display setup? We can add some JS that monitors the displayed value and modifies the text content to show “<500” and “>50,000” respectively.

Let me know if this is correct to help with the code :muscle:

5

Hi @Support-Luis yeah that would be a displayed setup only the min - max values are ok as is
thank you so much

6

I’ve managed to write a code with chat gpt help and it works!

<!-- Update range slider value -->
<script>
Webflow.push(function () {
function updateSliderValues() {
  const sliderValueElements = document.querySelectorAll('.fs_rangeslider-1_handle-value');

  sliderValueElements.forEach(el => {
    const value = parseInt(el.textContent.replace(/,/g, ''), 10);
    if (!isNaN(value)) {
      if (value === 0) {
        el.textContent = '<500';
      } else if (value === 50000) {
        el.textContent = '>50,000';
      } else {
        el.textContent = value.toLocaleString();
      }
    }
  });
}

setInterval(updateSliderValues, 1000);
});
</script>

Thanks

7

Thank you for sharing the solution @anais! :raised_hands: