Hopefully the title is clear, but I have a scenario where I have 2 price range slider fields that a user can search on, Sale Price and Lease Price. I need to return results in which the item can fall in between either price range. I've defined the operator="or" but it doesn't seem to do anything. It appears to be doing an AND selection, so items from Algolia that are within both price ranges return.
What do I need to do to get this to work?
I have two of these components on the page, one for Sale Price and one for Lease Price.
<ReactSlider
className="price-slider"
value={[range.min, range.max]}
disabled={disabled}
markClassName="slider-mark"
min={min}
max={max}
operator="or"
pearling
minDistance={minDistance}
withTracks
snapDragDisabled={false}
ariaLabel={['Lower thumb', 'Upper thumb']}
ariaValuetext={state => `Slider value ${state.valueNow}`}
thumbClassName="slider-thumb"
trackClassName="slider-track"
renderThumb={renderThumb}
onAfterChange={onChange}
onSliderClick={onSliderClick}
/>
Each one outputs a slider:
The request query that it generates:
shop?page=1&configure[hitsPerPage]=18&range[sh_sale_price][min]=14680&range[sh_sale_price][max]=119012&range[sh_lease_price][min]=7347&range[sh_lease_price][max]=49972
