Rheostat PropType Errors and Context API Legacy Error - RangeSlider Widget (Rheostat) with React

[Ekeu]

Describe the bug 🐛

I'm currently working with React Instantsearch. While using the RangeSlider widget using Rheostat with React, I had several errors of this type Warning: Failed prop type and a Contex API Legacy Warning that only appeared in Strict Mode

To Reproduce 🔍

All I did was I went on Algolia's doc copied the custom range slider already provided, created a custom component within my code and then pasted it.

I customized the component, then exported it and just passed the required attribute.

A live example helps a lot! We have a simple online template for you to use for your explanations:

You can have access to the example here . What was really strange was that when I reproduced the scenario in codesandbox, I didn't get the proptype errors as shown in the screenshot section.

Expected behavior 💭

As a junior developer and from reasoning based on what I read on Algolia's doc, since Rheostat is already handled by the RangeSlider widget the props causing the errors i.e background, handle and progressBar should be handled too. The values they need are also supposed to be passed in by the widget.

Screenshots 🖥

Here are the screenshots of the errors I'm getting

PropType Errors

Legacy Error

Here is my custom RangeSlider Component

Here is how I use it after it's exported

Environment:

• OS: [ windows]
• Browser [chrome]
• Version [87.0.4280.66]
• React [17.0.2]
• React Script [4.0.2]

May be I'm missing something out.

Thanks and have a nice day!

[Haroenv]

the Rheostat example is an example based on a third-party library (Rheostat), which isn't part of InstantSearch. It's true that we didn't use the latest version, since the class names changed considerably, and we couldn't find a way to force the InstantSearch classes on the latest version of Rheostat. If you want an updated version, you can use the latest version of Rheostat and link that to InstantSearch

[Ekeu]

Thanks for your feedback @Haroenv .

I did use the latest version of Rheostat which is v4.1.1

[Haroenv]

The warnings are within Rheostat itself, airbnb/react-with-direction#22 for example. Unfortunately I don't know which other slider to recommend at the moment, but anything more modern should do the trick, maybe https://github.com/chakra-ui/chakra-ui/tree/main/packages/slider

[Ekeu]

Ok thanks for the alternatives @Haroenv . Willing to stay within Algolia's services and widgets I think I'll rather switch to a Numeric menu.

[Haroenv]

I was a little unclear, I meant that you can plug any other open source slider implementation to InstantSearch, there's just no demo because there aren't good enough candidates to put in our documentation (while rheostat has flaws, it's probably the only one with all features)

[Ekeu]

Ok I get it!

[sarahdayan]

Hey @Ekeu, it looks like you found a solution. I'll close this issue, don't hesitate to reopen if needed.