InstantSearch.js rangeSlider with AirBnb-like tooltip functionality

[nathanpop]

Hello,

I'd like the InstantSearch.js rangeSlider to function like AirBnb's rangeslider - in one respect: Where, instead of displaying tooltips over-head, the min-limit and max limit are over-written depending on which slider circle you use (e.g: the left slider circle alters the minimum-limit number, the right slider circle alters the maximum-limit number).

You can see the Airbnb slider here .

I realize I probably will need to do something like:

tooltips: {
    format: function(formattedValue, rawValue) {
        // somehow detect if right slider or left slider just changed - (not sure how)
        // overwrite appropriate minimum or maximum DOM element e.g: w/jquery
    }

I'm not sure if minimum/maximum values will end up conflicting with the minimum/maximum values, or if there is a more efficient/effective way to do this.

Also, I can't seem to find the raw templates for the rangeSlider in your source. (which I see generates an ais-range-slider class, etc).

Can you help me implement this in the most-efficient way possible?

@vvo of Algolia emailed me - mentioned he thought this was a legitimate usecase, and asked that I post this here: "I believe what you want to achieve is display the min max in some place where it does not move - Instead of having tooltips attached to the handles. This is currently not feasible but could be done easily by adding some API entries to the rangeSlider widget."

Thank you! Nathan Wharton

[vvo]

@nathanpop To be absolutely sure of what we need to do to solve your issue, I will rephrase it so you can confirm/complete.

What you want to be able to do is display the current min and max values of the slider in another place than the tooltips.

[nathanpop]

Hmm.. if someone wants to display the current min and max values of the slider "in another place" - that might work - though then it would be necessary to hide or overlay the default min and max positions and put these slider values in their place..

Just to be clear (and I think what you do understand) is what the Airbnb slider does is: persistently replace either the min or max value - based on the value of the either the right slider (which replaces the max) or the left slider (which replaces the min). (or that is to say the regular "slider" min and max do not show)

I suppose what you're suggesting is that instead of doing a replacement of the value, you simply choose other dom nodes for them to be displayed on and hide dom nodes you don't want.. which I think you're right - might work.. I do wonder what will happen in cases where e.g: the sliders disappear, etc.

Thank you!

On Mon, Feb 8, 2016 at 9:09 AM, Vincent Voyer notifications@github.com wrote:

@nathanpop https://github.com/nathanpop To be absolutely sure of what we need to do to solve your issue, I will rephrase it so you can confirm/complete.

What you want to be able to do is display the current min and max values of the slider in another place than the tooltips.

— Reply to this email directly or view it on GitHub https://github.com/algolia/instantsearch.js/issues/826#issuecomment-181249226 .

Nathan Wharton

Chief Technology Officer | POPUP IMMO

T: +33(0)652778780 <%2B33%280%29651089677> L: +33(0)176440064 E: nathaniel@popupimmo.com mohamed@popupimmo.com

_Connecting Ideas With Short-term Space/ Un Pop-Up Store http://t.sidekickopen36.com/e1t/c/5/f18dQhb0S7lC8dDMPbW2n0x6l2B9nMJW7t5XZs3N1HjgVQJV4b4XXD-FVRYyc856dvPqd6gqT402?t=http%3A%2F%2Fwww.popupimmo.com%2Fselection-d-espaces-ephemeres%2F%3Fcnpf%3D1%26cnep%3D0%26cato_cat%3D1816%2C1814&si=5671284861304832&pi=57802daa-fc02-43c7-a562-17f32f10b089 ou un Showroom http://t.sidekickopen36.com/e1t/c/5/f18dQhb0S7lC8dDMPbW2n0x6l2B9nMJW7t5XZs3N1HjgVQJV4b4XXD-FVRYyc856dvPqd6gqT402?t=http%3A%2F%2Fwww.popupimmo.com%2Fselection-d-espaces-ephemeres%2F%3Fcnpf%3D1%26cnep%3D0%26cato_cat%3D1814&si=5671284861304832&pi=57802daa-fc02-43c7-a562-17f32f10b089 pour tous vos projets!_

www.popupimmo.com http://www.popupimmo.com/ Facebook https://www.facebook.com/PopUpImmo Twitter http://t.sidekickopen36.com/e1t/c/5/f18dQhb0S7lC8dDMPbW2n0x6l2B9nMJW7t5XZs3N1HjgVQJV4b4XXD-FVRYyc856dvPqd6gqT402?t=https%3A%2F%2Ftwitter.com%2FPopUpImmo&si=5671284861304832&pi=57802daa-fc02-43c7-a562-17f32f10b089 Instagram http://t.sidekickopen36.com/e1t/c/5/f18dQhb0S7lC8dDMPbW2n0x6l2B9nMJW7t5XZs3N1HjgVQJV4b4XXD-FVRYyc856dvPqd6gqT402?t=https%3A%2F%2Fwww.instagram.com%2Fpopupimmo%2F&si=5671284861304832&pi=57802daa-fc02-43c7-a562-17f32f10b089 Linkedin http://t.sidekickopen36.com/e1t/c/5/f18dQhb0S7lC8dDMPbW2n0x6l2B9nMJW7t5XZs3N1HjgVQJV4b4XXD-FVRYyc856dvPqd6gqT402?t=https%3A%2F%2Fwww.linkedin.com%2Fcompany%2F5038632%3Ftrk%3Dtyah%26trkInfo%3Didx%253A1-1-1%252CtarId%253A1422797440317%252Ctas%253Apopup%2Bimmo&si=5671284861304832&pi=57802daa-fc02-43c7-a562-17f32f10b089 Blog http://t.sidekickopen36.com/e1t/c/5/f18dQhb0S7lC8dDMPbW2n0x6l2B9nMJW7t5XZs3N1HjgVQJV4b4XXD-FVRYyc856dvPqd6gqT402?t=http%3A%2F%2Fwww.popupimmo.com%2Fblog%2F&si=5671284861304832&pi=57802daa-fc02-43c7-a562-17f32f10b089 See why RudeBaguette http://t.sidekickopen36.com/e1t/c/5/f18dQhb0S7lC8dDMPbW2n0x6l2B9nMJW7t5XZs3N1HjgVQJV4b4XXD-FVRYyc856dvPqd6gqT402?t=http%3A%2F%2Fwww.rudebaguette.com%2F&si=5671284861304832&pi=57802daa-fc02-43c7-a562-17f32f10b089 calls PopUp Immo “A Retail Revolution http://t.sidekickopen36.com/e1t/c/5/f18dQhb0S7lC8dDMPbW2n0x6l2B9nMJW7t5XZs3N1HjgVQJV4b4XXD-FVRYyc856dvPqd6gqT402?t=http%3A%2F%2Fwww.rudebaguette.com%2F2015%2F05%2F29%2Fpopup-immo-set-take-retail-revolution-around-globe%2F&si=5671284861304832&pi=57802daa-fc02-43c7-a562-17f32f10b089 "

[vvo]

Moved to #1069