2

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)

You can see my problem here : prices overlay

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
        })
    ]);
}
Kimako
  • 615
  • 2
  • 11
  • 26

0 Answers0