customRangeSlider ignores the range of minimal value

Using a custom range slider it works well except for the minimal value if change the range of minimal in the slide and then reset to that minimal it doesn’t trigger any update, also in the slider don’t change the range from minimal and change maxvalue it won’t update. Only works when the range does not englobe the minimal value

example it won’t work:

image

it will work (the range does not englobe the minimal value of 1):
image

the values of the slider are used with the refine method as follow:
refine([minValue]);
refine([minValue, maxValue]);

Hi @henrique.corte,

Could you provide a codesandbox using one of our codesandbox starter templates to demonstrate this problem?

That will help us troubleshoot your issue.

Thanks!

Hi @cindy.cullen the codesandbox is the follow:

https://89ulb.csb.app/

Sorry about the behavior its not updating well the price picker values in this demo in the sandbox, but in the console log it shows the values. By searching “chapeus” and filter the price in the range from 1€ to 3€ it will filter well and show only four products but in case select again from 0€ to 3€ should appear the initial seven products but keeps showing four products.

Your slider wasn’t working because you casted the range outside of the value. I refactored your code in the mean time to be able to understand it properly: https://codesandbox.io/s/instantsearchjs-app-jil93

@haroen Thanks for the answer got it, but if have a product that cost 0.07 for search “chapeu” it will show but when select the price slider to filter since the range is now from 1 to 2 it will never be able to get the product that costs 0.07 now, only cant get the products that costs 1.1, 1.22 and 1.11. Is it because this widget needs the value to be int so for all purposes there should’t be any product with price bellow 1 and larger then 2? If so what is the alternative?

In that case you’ll have to use the non-rounded numbers, as I did in the example, and then round only visually