简体   繁体   中英

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;

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM