How to set two attributes for a single RangeInput

[AbdelrahmanAhmed605]

Hi, I have an application containing item listings where each listing has a minimumPrice and maximumPrice. So every object in my algolia database has a numeric minimumPrice and maximumPrice attribute.

Now on my frontend, I want to apply a RangeInput that takes a min and max user input to refine a users search using both attributes instead of one. This is the way I want my implementation to work:

• when a user inputs a user_min, it should refine the search to any data that has a user_min<maximumPrice_val
• when a user inputs a user_max, it should refine the search to any data that has a user_max > minimumPrice_val
• when a user inputs a user_min and a user_max, it should refine the search to any data that has user_min<maximumPrice_val AND user_max > minimumPrice_val (the intersection)

Would this be possible to do? I'd really appreciate any input on this. Thanks in advance! :)

[Haroenv]

This is currently not possible, but what you can do is:

1. fork connectRange
2. add a new parameters minAttr maxAttr
3. change the relevant code to use those attributes instead of only one (mainly here: https://github.com/algolia/instantsearch/blob/master/packages/instantsearch.js/src/connectors/range/connectRange.ts#L183-L184)

Here's a quite old sandbox that shows this idea implemented in the previous version of React InstantSearch: https://codesandbox.io/s/kwklo3rz63

[ColeDCrawford]

Any Vue examples?

[Haroenv]

https://github.com/algolia/instantsearch/blob/master/examples/vue/e-commerce/src/widgets/ClearRefinements.vue is another example of linking up a vue component with a custom connector