#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.

17mo

Join the chat

May 29, 2022 (17 months ago)

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?

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

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

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

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

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

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

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

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

06:54 PM

Yeah, you can use typesense-js directly

Typesense

Lightning-fast, open source search engine for everyone | Knowledge Base powered by Struct.AI

Indexed 2779 threads (79% resolved)

Join Our Community Manage subscription

Similar Threads

Issues with Typesense Frontend Search Integration

Akash experienced issues integrating Typesense into their frontend search, particularly with their search box. Jason guided them to troubleshoot, eventually identifying the issue to be with react-instantsearch-dom and suggesting a downgrade to react 17, which resolved the issue.

12mo

Resolving Issue with Instantsearch Sort_by in React

Edward had a problem with sorting functionality in a React component using Algolia's InstantSearch. Jason recommended a potential solution for specifying index names which resolved the issue.

16mo

Network Errors and Duplicate Requests in Typesense

Ethan and Rushil were experiencing more than 300 network errors and duplicate requests from Typesense. After rigorous troubleshooting, Jason identified the issue as an Instantsearch-induced multiple re-rendering and implemented a fix. Multiple requests reduced, but networking errors persisted, suggested to be due to client-side internet connectivity.

2mo

Troubleshooting Typesense Setup and Understanding Facets and Keywords

Demitri encountered errors when exploring Typesense for the first time. Jason guided them through troubleshooting and discussed facets, keyword settings, and widget configurations. Helin shared a Python demo app and its source code to help Demitri with their project.

19mo

Implementing Search Suggestion/Autocomplete Functionality in Typesense

Denis needed advice on implementing search suggestions in Typesense. Jason provided a solution for fetching after 3+ letters. However, questions on design pattern and passing hooks remain unanswered.

19mo