Display the amount of steps on a Range Slider

Attributes
1

Hey Pros!

First time posting here. I’ve been a member since last year and right now I’m trying to learn attributes! I’m very happy of being part of this community!

I’m wondering, has anyone of you has tried to make a range slider show two different step values?
I’m trying to make the slider count both the number of products (1,2,3…) and the total amount of money ($20,$40…)

Screenshot 2023-07-25 at 23.32.55

My option was adding 2 different fields on the collection item, one for the amount (which is always 1) and other for the price. The custom attribute fs-rangeslider-step is connected to this value within a collection list. But I have no idea if there’s a way to connect the other field to another custom attribute and what would be the custom attribute for the second text span that would display that number?

image

This is later going to be filtered by a select but, right now the task at hand is making it display both numbers.

I’ve searched for this for hours and still no clue.

Thank you for taking the time!

Martin

ReadOnly Link
https://preview.webflow.com/preview/banderillas-fiesta-21bdb0?utm_medium=preview_link&utm_source=designer&utm_content=banderillas-fiesta-21bdb0&preview=287154a8c4fcce8837c8d2c5v05d005fc&pageId=64c06d373cd3a8d0d1a2dbd8&workflow=preview

2

Hey @mtinmendivil! You can do this with some custom code that can modify a text element every time the Slider updates.

Can you share a published link? Your Read-only seemed to be broken

3

Hey Luis,

Thanks for the help! :slight_smile:

Here’s the link: Site

4

Hey @mtinmendivil! Can you try this code? You’ll only need to remove the fs-rangeslider-element = display-value from the element on top of the range slider and add an ID of your choice, I used quantity.

<script>
      window.onload = () => {
        const sliderPriceElement = document.querySelector(
          '[fs-rangeslider-element="display-value"]'
        );
        let quantity = document.getElementById('quantity');
        let sliderPrice;

        observer = new MutationObserver(function (mutationsList, observer) {
          sliderPrice = parseInt(sliderPriceElement.innerHTML.replace(/,/g, ''), 10);
          quantity.innerHTML = sliderPrice / 20;
        });

        observer.observe(sliderPriceElement, {
          characterData: true,
          childList: true,
          attributes: false,
        });
      };
    </script>

Add this to the </body>

1 Like
5

This works perfectly!

Thank you for the support as always, Luis!

1 Like
6

Hi!

So, I added this slider to a collection list, in which you could do the calculation with a selected product.
It seamlessly works, the only thing is that due to this line, it’s not giving whole numbers because not every product costs $20.

          quantity.innerHTML = sliderPrice / 20;

What would I need to do to?

Sorry if it’s something obvious but my coding skills are limited.

Thanks in advance! :slight_smile:

7

Hey @mtinmendivil! If you have the price on the card we can grab the value directly from it like we did with the sliderPrice value.

Can you share a link to this page? I’ll help you out :slight_smile: