CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
IkePr
IkePr

Reputation: 930

Bootstrap slider - get value and show it in a div

I've implemented bootstrap and jquery and bootstrap jquery (https://github.com/seiyria/bootstrap-slider). I am using example 6 (http://seiyria.com/bootstrap-slider/). I want to get that value and show it in a div (so later I can create an if with that value), but I cannot get it to show. This is my HTML code:

<div class="col-lg-6" style="height: 39px; padding: 10px; padding-left: 25px;>
    <input id="ex6" type="text" data-slider-min="10000" data-slider-max="100000" data-slider-step="1" data-slider-value="90000"/>
    <span id="ex6CurrentSliderValLabel">Maksimalna cena: <span id="ex6SliderVal">90000</span></span> din.
</div>
<div id ="ivancar"> test </div>

And this is my JavaScript (jQuery) code:

var slider = new Slider("#slider1");
   slider.on("slide", function(slideEvt) {
   console.log(slider.getValue() );
   var div = slider.getValue();
});
document.getElementById("ivancar").innerHTML = div;

Upvotes: 0

Views: 1922

Answers (1)

Rajshekar Reddy
Rajshekar Reddy

Reputation: 19007

You have placed the logic of updating your div outside the slide event. Place it within the slide event.

 slider.on("slide", function(slideEvt) {
   console.log(slider.getValue() );
   var div = slideEvt.value; // this is what the plugin says
   $("#ivancar").html(div); // <== update logic must be here
});

Note: I changed the document.getElementById("ivancar").innerHTML = div; code to $("#ivancar").html(div); for simplicity

Upvotes: 2

Related Questions