Feature request: Allow connectRange to accept `minAttribute` and `maxAttribute` properties

Feature request:

Accept minAttribute and maxAttribute props on sliders that use connectRange().

Example use case:

My data contains zoom lenses (e.g. 70-200mm) that have a minMM and maxMM focal length, as two separate properties (minMM and maxMM).

Suggestion:

First, maintain current behavior of accepting an attribute property.

    <MySlider
      attribute="foo"
      min={0}
    />

But also accept minAttribute and maxAttribute, and apply the refinements against these two different properties:

    <MySlider
      minAttribute="minMM"
      maxAttribute="maxMM"
      min={0}
    />

When shown in ‘Current Refinements’, this would still appear as a single item with only one “x” to remove the refinement.

Hello @jbb
Thanks for your request.

If I correctly understood, you have two different attributes (minMM and maxMM) that you would like to have on the same slider and be able to refine the search results against them (and remove it at once).
Unfortunately we do not have plan for updating the slider with a such specific behavior right now because, as you already know, a slider is meant to create a range of values for a specific attribute not for refining two different attributes at the same time.
But I’m wondering if having two sliders (one for the minMM and a second one for the maxMM) could be a quick solution to your issue?
Another possible solution could be to use a MenuSelect if you have a finite list of combinaisons of minMM/maxMM that you could merge into a single third attribute and then display in that dropdown.

Do not hesitate if you have any other requests.
Thomas

Bummer. It’d be useful when a data item itself has a range of values for a given attribute, and so can’t be stored on one property (like ‘price’). I don’t think two range sliders or a MenuSelect would make for an intuitive or pleasing UX in this case.

I’ve looked at other custom ways to do this using a filter, but then I run into major issues with it not being displayed in Current Refinements (like my other refinements) and, even if I could get it shown there, how to clear it when “x” is clicked. That’s the reason for the feature request.

Hi @jbb, if you only want to group some refinements in current refinements, you can very easily do that with a customer current refinements widget: see https://www.algolia.com/doc/api-reference/widgets/current-refinements/react/#connector

For you specific case there are a couple of options your can try:

  1. create your own connectRange, starting off the current one to work on 2 attributes at the same time
  2. try creating a widget using two connectRange connector, one for each attribute
    • the first connectRange will be using attribute=“minAttribute” with max= currentRefinement.max
    • the second connectRange will be using attribute=“maxAttribute” with min=currentRefinement.min

I hope this helps!

Thanks for the response. Your suggestion #2 is the most likely to work of all the suggestions and still be reasonably clean imo.

Suggestion #2:

  1. try creating a widget using two connectRange connector, one for each attribute

    • the first connectRange will be using attribute=“minAttribute” with max= currentRefinement.max
    • the second connectRange will be using attribute=“maxAttribute” with min=currentRefinement.min

Your suggestion works to restrict the query:

<VirtualRange
  attribute="maxMM"
  // values={[null, 30]} // or this works too
  max={30}
  />

<VirtualRange
  attribute="minMM"
  // values={[15, null]} // or this works too
  min={15}
  />

But it doesn’t show up in Current Refinements widget
or as part of its ‘items’ parameter:

<CurrentRefinements
  transformItems={items => console.log(items)}
/>

Are virtual widgets excluded from Current Refinements intentionally? This would probably be workable if it were added to the CurrentRefinement’s items parameter. So close! (I still have to try CustomCurrentRefinements, but its transformItems’ items parameter should contain the same values. Then I’d still have to figure out how to invoke the clearing function for both attributes when one “x” is clicked by a user using CustomCurrentRefinements.)

__

Suggestion #1:

  1. create your own connectRange, starting off the current one to work on 2 attributes at the same time

I’ve considered attempting this, but even if it works, it causes ongoing maintenance headache to maintain a separate branch of react-instantsearch and keep up to date with Algolia’s future changes. … It might be the only choice b/c literally everything else I’ve tried (Configure component filters, onSearchStateChange, connectRange, a regular range component, etc.) has blocking issues somewhere.