Reinitialize Range Slider

Attributes
1

Hi @Support-Luis,

I’m working with a range slider and I’d like to achieve the following:

My range slider first goes from min=10 to max=2500, at 2000 a CTA appears to add more tickets.
When I click on that CTA I’m programmatically changing my max from 2500 to 10000 and my steps from 10 to 100.

I then want to reinitialize my slider so it now functions from 10 to 10000 with steps of 100.

I tried using this code:

window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
   'rangeslider',
   (listInstances) => {
     window.fsAttributes.rangeslider.init();
   },
 ]);

But it was super wonky — alternatively I created another range slider and hide the first one to display the second as I needed this ASAP, but I’d like a cleaner way to do this if possible.

Let me know if there’s any solution?
Also, would be awesome to get some more technical documentation for stuff like this that can be applicable to all attributes solutions I guess?

Thanks!

2

Hey @joseph.bongrand! Could you please share a link? I’ll take a look :muscle:

3

https://preview.webflow.com/preview/gorgiasio?utm_medium=preview_link&utm_source=designer&utm_content=gorgiasio&preview=abd5551d22bdd7a58f42d713ac615cd6&pageId=66cc76bf86bf3863ae684345&locale=fr&workflow=preview

4

@Support-Luis I don’t think seeing the page will help that much as the setup is not reflecting this functionality.
Can you let me know how I can dynamically update the range slider so that I can change the min/max when I click on a CTA.
Effectively this is what I need to achieve:

On CTA click:

  • Get current value → Set it in fs-rangeslider-start
  • Edit fs-rangeslider-max from 2500 to 10000
  • Update the range slider with these properties
5

Hey @joseph.bongrand! You can dynamically set the value of the slider with some JS.

It should look roughly like this:


<script>
  window.onload = function () {
    console.log('Window has loaded!');
    let cta = documen.querySelector('.CTA_CLASS');
    const slider = document.querySelector('[fs-rangeslider-element = "wrapper"]'); //Select the slider wrapper

    cta.addEventListener('click', (e) => {
      const minVal = 0; // Dyanmically get this number from your CTA if needed
      const maxVal = 10000; // Dyanmically get this number from your CTA if needed
      slider.setAttribute('fs-rangeslider-min', minVal.toString()); // Update min vlaue
      slider.setAttribute('fs-rangeslider-max', maxVal.toString()); //update max value
      window.fsAttributes &&
        window.fsAttributes.rangeslider &&
        window.fsAttributes.rangeslider.init(); //restart rangeslider if needed
    });
  };
</script>

This code is untested for your specific use case so please let me know once the setup is ready for this functionality and I can refine it :slight_smile:

1 Like