#community-help

React Instant Search Range Slider Issue and Alternative Solutions

TLDR Lukas voiced concerns and issues regarding React instant search range slider. Jason suggested a custom range slider, custom code, and using typesense-js directly as potential alternatives and solutions.

Powered by Struct AI
May 29, 2022 (17 months ago)
Lukas
Photo of md5-d9deaf8d1683beb47108307453fe58bc
Lukas
05:17 PM
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?
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
05:20 PM
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
Lukas
Photo of md5-d9deaf8d1683beb47108307453fe58bc
Lukas
05:23 PM
Jason yeah that’s what I’m using, but the same rules apply, you still can’t select out of range values
05:24
Lukas
05:24 PM
What I mean to say can you implement your own logic and skip react instant search?
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
05:25 PM
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.
05:26
Jason
05:26 PM
Btw, I just remembered, I did use react-instantsearch once (and promptly forgot about it), to implement this demo: https://showcase-nextjs-typesense-ecommerce-store.vercel.app/

Here's how I implemented the price range slider: https://github.com/typesense/showcase-nextjs-typesense-ecommerce-store/blob/master/components/RangeSlider/RangeSlider.js
05:27
Jason
05:27 PM
That slider doesn't seem to have the issue you mentioned. So I think setting min and max in the widget are key
Lukas
Photo of md5-d9deaf8d1683beb47108307453fe58bc
Lukas
05:44 PM
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.
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
05:45 PM
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?
Lukas
Photo of md5-d9deaf8d1683beb47108307453fe58bc
Lukas
05:50 PM
Jason 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:
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
06:09 PM
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
Lukas
Photo of md5-d9deaf8d1683beb47108307453fe58bc
Lukas
06:12 PM
Jason yes, its not from typesense, its the connectRange api from react-instantsearch
06:15
Lukas
06:15 PM
So there is an option to use typesense rest api yourself?

Like passing all the parameters and query string yourself.
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
06:54 PM
Yeah, you can use typesense-js directly