Slider Range update causes the slider to break

[lmartins]

I'm trying to use the Slider primitive to operate a price filter for Algolia. Because the slider is one of the many facets exposed by Algolia, the range the slider can operate within can change as the user interacts with other facets. Is there a way to reset the primitive when that happens?

Currently when this happens and I try to change the min and max values for the component, the layout breaks and the slider grows out of proportion, I assume because it is not expecting these values to ever change.

[benoitgrelard]

Hey @lmartins,

Are you controlling the Slider with value/onValueChange, or using in an uncontrolled way with defaultValue?

In any case, if the range dynamically changes, you will need to make sure the current value it holds is within the current valid range as we only validate this when interacting with the component (pointer/keyboard), but not when you are setting the value (defaultValue or value).

It's a bit difficult without seeing an example, but I believe that's the issue and you just need to clamp the current value within the range when it changes.

If you are NOT controlling the component, to be able to update defaultValue and have it update the component, you will need to use React's key to re-initialise the component by generating a unique key based on the range (something like ${min}-${max} would work for example).

Let me know how you get on!

✌️

[lmartins]

Thank you @benoitgrelard
That was one of the issues I had on my setup, compounded by a fixed step size which did not work for all product categories, some with ranges varying by thousands of dollars, other just by a few. That required having a dynamic step size that adjust to the given range and have the minStepsBetweenThumbs still allowing cursor movement.

Thanks so much your help!