Creating widget that filters with 2 attributes

Hi! I’m using InstantSearch-Vue in my project and I want to create a widget that filters search results using 2 attributes.

Now I have 2 <ais-range-input> widgets for “AttributeA” and “AttributeB”.
I want to have 1 widget like <ais-range-input> that shows minimum value of “AttributeA” and maximum value of “AttributeB” as a placeholders.
Filtering logic is: AttributeA >= widget_min_value AND AttributeB <= widget_max_value.

I just confused by documentation: I can extend widget, create a new one with connectors and create a truly new widget like here: https://jsfiddle.net/bobylito/v453u1kv/
Which approach should I use and how to perform such custom filtering, and also save auto-placeholders feature?

This isn’t something we have out of the box, but there’s a custom widget here which looks at two attributes for the range: https://codesandbox.io/s/vue-instantsearch-app-fxfvl

Thanks for the reply.
Strange, I got an error in Sandbox you sent me. I fixed component name issue in App.vue, but still get this:

[Vue warn]: Error in callback for watcher “widgetParams”: “TypeError: Cannot read property ‘dispose’ of undefined”
TypeError: Cannot read property ‘dispose’ of undefined

​Here is my latest edits:

Anyway I will try to copy new widget with connector to my working project and will reply soon, thanks.

I have updated the app, apparently i forgot to save before i made my last changes https://codesandbox.io/s/vue-instantsearch-app-m3lon

Ok, thanks, now it looks ok. I made a quick bad hot fix in my project, now I need to replace my hot fix with this new widget.

1 Like