I'm using InstantSearch.js (via algolia) to make a price rangeslider. It's ok and it works well with one exception: the prices overlap when they are too close. We can see it on several examples, even on the site of the doc: Doc algolia
I use it for vehicle prices so we don't see anything when don looks for vehicles with prices not far apart
I would simply like to leave the 2 rheostat-tooltip fixed but I can't find a way to do it. (the prices don't move, but the cursors do)
As @cmgchess suggested in comment I post a link where there is an example : example instantSearch and where you can easily see the overlapping.
thanks for any time and help :)
HTML
<li class="u-bt-thin-translucid">
<button class="my-grid mod-space-between mod-middle my-text mod-ff-lead-bold-2 mod-fs-sm2 mod-uppercase u-pt-sm u-pb-sm u-c-neutral-dark-2 u-bc-neutral-light-max u-w-100 u-b-none"
my-toggle="dd-filtrer-par-prix-mensualite"
my-toggle-options="force_dismiss"
u-pr-xxs="sm,md">
<span class="mod-on icon-chevron-up u-fs-lg"></span>
<span class="mod-off icon-chevron-down u-fs-lg"></span>
</button>
<div class="u-pb-sm" my-toggle-name="dd-filtrer-par-prix-mensualite">
<div class="my-text mod-uppercase">Prix</div>
<div id="price-range" class="u-pl-sm u-pr-md u-mb-md"></div>
<div class="my-text mod-uppercase">Mensualité (€/mois)</div>
<div id="monthly-price-range" class="u-pl-sm u-pr-md"></div>
</div>
</li>
JS
// Filtre prix
if (document.querySelector('#price-range') !== null) {
algoliaBmc.search.addWidgets([
instantsearch.widgets.rangeSlider({
container: '#price-range',
attribute: 'price',
precision: 0,
step: isGoa ? 10 : 1000,
pips: false,
tooltips: true
})
]);
}