CODEWITHSUNDEEP
jquerytwitter-bootstrapslider
gedwin
gedwin

Reputation: 41

bootstrap slider - display upper and lower range values separately

I am using bootstrap-slider.js (https://github.com/seiyria/bootstrap-slider) to implement a range slider like example 2 here http://seiyria.github.io/bootstrap-slider/

I have the slider working but I don't like the tooltip and want to display the upper and lower values at each end of the slider instead, updating them dynamically when the upper or lower sliders are moved. The problem I have is that the values from the slider come as a comma separated list - i.e. 1,1000 (upper,lower), so I get both values at each end of the slider. I need to display the lower value to the left of the slider and the upper value to the right of the slider.

So far I have got it to work using the following code, but it shows both upper and lower values at each end of the slider. I have tried trimming the values but can't get it to work. Can anyone suggest a way that I can just display one max/min value at either end of the slider?

My code:

HTML:

        <h4 id="search-slider-lower-value">£<span id="search-sliderLowerSliderVal">100</span></h4>
        <input id="search-slider" type="text" class="span2" value="" data-slider-tooltip="hide" data-slider-min="100" data-slider-max="1000" data-slider-step="5" data-slider-value="[100,1000]"/> 
        <h4 id="search-slider-upper-value">£<span id="search-sliderUpperSliderVal">1000</span></h4>

Jquery:

$("#search-slider").slider();
    $("#search-slider").on("slide", function(slideEvt) {
        $("#search-sliderLowerSliderVal").text(slideEvt.value);
        $("#search-sliderUpperSliderVal").text(slideEvt.value);
    });

Upvotes: 1

Views: 1991

Answers (1)

Will
Will

Reputation: 544

The values are stored in an array.

$("#search-slider").slider();
$("#search-slider").on("slide", function(slideEvt) {
    $("#search-sliderLowerSliderVal").text(slideEvt.value[0]);
    $("#search-sliderUpperSliderVal").text(slideEvt.value[1]);
});

Upvotes: 0

Related Questions