Filtering attribute with min/max values

Open Q&A
#1

Hi all,

I have a use case where I have a couple of attributes which have min and max values. For example the width of a door. The attribute door_width has a minimum width (e.g. 120mm) and a maximum width (e.g. 240mm). Now, I would like to use the rangeSlider widget to filter for those values.

In my first approach I saved all possible values inbetween min and max into Algolia’s index. So in that case this would have been: 120, 121, 122, 123, …, 240. As you can imagine, this would generate a lot of values if you have big differences between the min and the max values. It’s gotten so big, that I reached the limit of 10KB (was up to 17KB) per index item.

Therefore, this is not a possible solution for me anymore. I would much rather like to only save the actual min and max value (e.g. [120, 240]). My question now is, how can I filter for those values?

Let’s say my range-slider has a value of [150, 350], the item with a range of [120, 240] should be displayed. How could I do this with the range-slider?

Thanks for your suggestions.

#2

I’ve tested it with only saving the min and max value into the index and here’s a visual explanation of my test results. Let’s assume we have a min value of 10 and a max value of 20. If the range slider’s values are between 8 and 11 or 18 and 23, the item is shown. Unfortunately, if the range slider’s values are between for example 11 and 18 (both values are between min and max), the item is not shown.

min_max_use_case
min_max_use_case720×370 23.4 KB

Right now I have saved my values as an array [10, 20] into the index. Maybe there’s a trick to saving a “range value” (I’m thinking something like 10:20 as a string)?

Hope this makes all sense – thanks for your suggestions!

Faceting for min/max pairs
#3

Hi @aarongerig,

If I understood correctly, you need to calculate the range of values for a numeric facet. If so, Algolia does it for you.
Each search response contains Facets Stats field field with the calculated min and max value for each numeric facet.

I hope this solves your problem.

#4

Hi @vladislav.fitc,

Thank you for looking into this! Unfortunately, I don’t think that’s what I’m looking for. I do not need to know the range of values in the index.

Imagine a product with variable sizes (height, width, depth) and therefore also a variable weight. You as a vendor want to specify only the min and max values of those attributes. So for example the height is at minimum 5mm and at maximum 10mm (just an example). That I’d like to insert into the Algolia Index and that’s why I’m passing an array of number => [min, max] or [5, 10].

Now that being said, those values have to be filtered by a range slider. You want your customer to be able to filter a range of product height’s, for example minimum 3mm and maximum 8mm. Your product with a height between 5 and 10 is then displayed, because ranges 3 to 8 and 5 to 10 are overlapping. This works well with my current implementation of the range slider. What doesn’t work is when the customer chooses a range between 5 and 10 (e.g. min: 6 and max: 9) => see image above.

Ranges 6 to 9 and 5 to 10 would be overlapping, but Algolia doesn’t give me that result. Do you know a solution to that?

#5

Hello Aaron,

If I understand your problem correctly, you’re trying to filter results based on a range, where you records don’t contain exhaustive or specific values, but ranges that they belong to. So for instance, a record can look like this:

{
  "title": "Deanta Eton Unfinished Oak Internal Door",
  "min_width": 120,
  "max_width": 240
}

What you’re trying to do is set up a range slider which lets users select their own range, and filters results accordingly. In this scenario, a user setting the range slider to 100-230 wouldn’t retrieve the above result because the minimum width is above their minimum width. However, when setting the range slider to 130-200, they would, as the value would fit within the bounds of the record. Is this correct?

If this is what you’re trying to achieve, you can do numeric comparisons with Algolia filters. We support common numerical comparison operators (< , <= , = , != , >= and >) so you can create filters like: min_width <= ${lower_range_bound} AND max_width >= ${upper_range_bound} (where lower_range_bound and upper_range_bound) are the retrieved values from the range slider).

Note that you will need to compute this filter by hand. You can’t use the default InstantSearch rangeSlider widget, as it only works with specific facet values, not ranges (so, you’d need to have exhaustive values as you initially did, which is impractical and prone to exceed the record size limit). In this case, I recommend using a custom range slider (either a third-party component or building your own), retrieving the values when users select them, computing the filter, and passing it to Algolia at query time.

Since this would be a custom implementation, to know what are the lowest and highest possible bounds, I’d recommend retrieving that information from your own back end and exposing it in your front end, so that you can initialize the range slider with minimum and maximum values.

Does this help?

#6

Hi @sarah.dayan,

Yes, your description is very close to what I’m trying to do. The way I’d like to filter based on those values is a bit different, but still not doable with the default implementation of the range slider.

I guess I have to find a way to make it work with a custom made widget. Any help with that implementation or even suggestions are greatly appreciated!

Thanks for the help though!

#7

Hey Aaron,

I would recommend using a third-party widget like noUiSlider. You can listen for value updates and use the connectConfigure connector to refine InstantSearch’s state.

If you’re struggling with this solution, don’t hesitate to provide us with a minimal CodeSandbox so that we can help you troubleshoot.