1

I'm using Algolia's rangeslider from instantsearch.js with tooltips set to false. When the slider's maximum value is displayed (the value to the right side of the slider) (e.g: 2,000), I want it to display as (e.g: 2,000+) (with a "+").

I've tried accessing/resetting the value with jquery like this:

var $sliderMax = $('#my_slider_identifier .ais-range-slider--value').last();

And I've succeeded in getting a handle on the variable, but when I try resetting the maximum value from a custom widget's render() function (so it updates with each new set of results coming in) with the equivalent of $sliderMax.text('2,000' + '+'), nothing happens - I assume because the DOM is being re-written after my call..

If the rangeSlider is showing the maximum value (e.g: 2000), Is there a recommended way to put a '+' on the end?

EDIT: To give more background: Though I have a range of values from 0-10,000+, the vast majority of the data is in the 0-2000 range, and I thus, truncated my data so that if it's >2000, it shows as 2000.

Also, incidentally and oddly, As a hack, I found that I can write to the DOM if I use a setTimeout of 0 ms (yes, there are stackoverflows on this) and re-do a JQuery selection:

setTimeout(function(){
    $('#index_price_eur_day_i .ais-range-slider--value').last()
        .text(MAX_PRICE_SLIDER + '+');}, 0);

I'd love to find a more-efficient solution.

Community
  • 1
  • 1
Nathan W
  • 486
  • 1
  • 5
  • 16
  • One small question: if this is the maximum value, why do you want to put a `+` after it since there are none above? – Jerska Jan 26 '16 at 13:58
  • @Jerska Before I'm dealing with e.g: $/day and I want my slider go from 0 to $2000+. I have some entries that go as high as 10,000, but I intentionally set that facet value to max at 2000 (in that case) - because I want a smaller spread for my slider. Hope this answers the question! – Nathan W Jan 26 '16 at 17:07
  • I'm not sure I'll be able to answer the question, but you did definitely answer mine! – Jerska Jan 26 '16 at 20:32

1 Answers1

3

I heard from Tim Carry of Algolia and he suggested that I try the :after pseudo element of CSS to fix this.

Indeed, I added this CSS and it always adds a + -- unfortunately even when the slider is not at the max value :/

#my_slider_identifier .ais-range-slider--value:last-of-type::after { 
    content: "+";
}

So it's not a perfect solution, but it may be "good-enough" - and it's not as ugly/inefficient as using jquery. If anyone has a better solution, please post it!

Nathan W
  • 486
  • 1
  • 5
  • 16