Instantsearch.js: rangeSlider bug on instantsearch v2

[Sewake]

Hi ! :)

I found out a bug with the rangeSlider that we can reproduce on your Tourism website example.

This problem occurs when we change the parameters in the url.
Note that the behaviour is working correctly with instantsearch v1 , using the exact same querystring.

Also, it seems that in your Tourism website with instantsearch v2 we don't have the possibility to move the slider (neither with Chrome of Firefox), but we can with version 1.

We found out this bug from our project and we tried to see if the behaviour was the same with instantsearch v1, we are looking for a solution or we would have to go back to v1 :/
This is kinda problematic for us because we are doing a redirection with prepopulated parameters based on the querystring and it result into a broken front rangeSlider.

Thanks for your work, we are using Algolia autocomplete & instantsearch a lot and we love it !
Hello from Bordeaux :smile:

[Haroenv]

Seems like this can cause an overflow too (open that link in Safari).

The decoded URL has nR:

{ person_capacity: { '>=': [ '1' ] },
  price: { '<=': [ '10000' ], '>=': [ '-350' ] } }

Thanks for the bug report!

[bobylito]

If the problem is only about handles that can't move, we've released a new version that fixes it. It's the 2.6.3.

As for the values. Indeed the max and min values are not restricted to the values given by the API. We should probably fix that 😅

Thanks for your patience, we'll try to fix ASAP.

[bobylito]

@Sewake can you check that now you're able to drag the handles?

[Sewake]

@bobylito We are able to drag the handles now :) Well done !

To answer the comment above, the problem was mostly about the min/max values cap. In our project we were still using v2.2.3 and we could drag the handles without any problem, so I noticed this bug only by consulting the demo site.

Thank you for your prompt response !

[bobylito]

The problem here is the definition of the proper behavior.
Is your issue visual or on the behavior side? Is the visual overflow the problem, or is it that you are setting values beyond what's in the dataset?

@Sewake

[Sewake]

@bobylito My problem is the visual overflow, but it's due to the fact that we try to set values beyond what's in the dataset (which isn't a problem because it doesn't actually change the hits returned by the API)

I gave 2 urls with instantsearch v2 and instantsearch v1 using the same queryset, and I would like to have the behavior of version 1.

The behavior I would like to have is to set the rangeSlider to the min value (10$) if the one specified in the querystring is below (nR[price][>=][0]=-350), and same for the max (if nR[price][<=][0] is above 1750$, set the rangeSlider max value facet to 1750$)

Also, I'm not sure, but ideally, we should define the min and the max after applying all facets others than rangeSlider (like here, the max value become 200$ because of the Shared Rooms filter). But I'm not sure because it might be tricky in case where we have more than one rangeSlider widget.

[Sewake]

Hello ! :) I come back to get some news

Does the behavior I described seem correct to you?

[bobylito]

Hi @Sewake Sorry for not getting back to you earlier. It's a tough question. Maybe @sashaprok you could help us on that :)