How to use the rangeSlider widget to support min and max as separate attributes of a product?


Our products has a range for length. We want to use the rangeSlider widget for this so the visitor can filter on these values. The attributes on the product are min-length and max-length.

  "product-1": {
    "name": "Product 1",
    "min-length": 20,
    "max-length": 40
  "product-2": {
    "name": "Product 2",
    "min-length": 30,
    "max-length": 40

The expectation is that the begin value is the most lowest number it can find from all the products, and the end is the highest number. The min and max knobs in the widget should be the selection to filter on.

How do I configure to set the minimum knob the value of the min-length attribute, the maximum know the value of the max-length attribute?

Also, what defines then the start and end values? The start is the lowest number of the two attributes combined, and the end the highest number?

How can we implement this using the rangeSlider widget using instantsearch.js with vanilla JS? Can we base the rangeSlider on two attributes per product and then only show the product if both values are valid according to the slider selection?

Thank you in advance.

1 Like