Algolia rangeSlider widget Min value

Hey Algolia community!

I’m currently using the rangeSlider via the widget but I want to set the min value to 0 for all facets, so that it looks more consistent across all sliders, rather than the current where it sometimes starts at 0, sometimes 3, etc.

In an ideal world, it would show all from 0-10, as an example but 0-3 would be greyed out if the only options available are actually 4-10 for that particular search.

I’ve just been able to get the min to set to 0 from the start, but that seems to select 0 as the filter from the start, which then causes some options to no longer be available. It’s purely for design purposes that we want to display each starting at 0.

I hope this makes sense and look forward to hearing back!

Thanks,
Andrew

Hey @andrew8, Algolia allows you to customise the range slider yourself and does not provide a default widget because there can be so many different options.

In your case, you should create your own range slider and use connectRange with it. Instead of using the min and max from the props, you can set your own (0, 10) with 1 step.

Assuming your are using react you can get a full example here. RangeSlider | React InstantSearch | API parameters | API Reference | Algolia Documentation

If you are using something else (Vue, Vanilla, etc) you can find a similar variation in the documentation.

1 Like

If you end up creating your own widget in order to handle this use case, it would be awesome if you could share it with us, so that anyone with the same need in the future could find this solution. :slight_smile:

1 Like