Hello, if anyone has experience with react instant search, can you implement your own range slider? I find React instant search

RangeSlider

to have very bad user experience. When setting your range on more than 1 slider, the rest of the slider values keeps jumping, because it always tries to find the hit. Also you can’t select out of range values? When selecting a value that doesn’t exist in the database i get:

Error: You can't provide min value lower than range.

In my opinion it would be much better if instead of throwing validation error, user would simply be informed that 0 hits were returned. Is there any solution to this?

I haven't used react-instantsearch, but at least in vue-instantsearch, you can bring in a custom range slider component. Looks like there's an equivalent in React here: https://www.algolia.com/doc/api-reference/widgets/range-slider/react/#connector

@Jason Bosco yeah that’s what I’m using, but the same rules apply, you still can’t select out of range values

You could... but if you're using instantsearch in your application already, it might be hard to get custom code to play nice with the other instantsearch widgets.

Yes I see, there’s really no issues with one slider, but look what happens when there’s more( I know that my current dataset is very small), it’s just that it causes too much jumping.

Hmm, looks like the min and max are jumping around based on the results. May be try setting min to 0 and max to some high number, instead of using the number from the results?

@Jason Bosco yeah, I tried, I set the calorie slider min to 0, but since the lowest value in my collection is 50, anytime I select number lower than 50 I get:

Hmm, that doesn't sound like an error from Typesense... May be it's coming from the range slider itself? And I'm not sure why they would disallow this

@Jason Bosco yes, its not from typesense, its the

connectRange

api from react-instantsearch

Yeah, you can use typesense-js directly