get the range values with bootstrap slider

Question

I would like to get values of the range with bootstrap slider.

I have :

 <label "slider"><b>Lengths</b></label>
       <input id="slider1" type="text" class="span2" value="" data-slider-min="0.2" data-slider-max="9.8" data-slider-step="0.2" data-slider-value="[3.4,6.6]"/>

and my javascript code :

  var slider= new Slider("#slider1");
   slider.on("slide", function(slideEvt) {
      console.log(slideEvt.value);
      });

but I get the following error (for console.log) : undefined

Finally, how to get the range values (min and max selected with mouse) ? Unfortunately, I can have only one value with the code above.

If anyone could help me, this would be nice.

Thanks

Answer 1

Your code is correct. You only missed an array index at

console.log(slideEvt.value);

So your code should be:

console.log(slideEvt.value[0]);

because bootstrap range slider returned an array.

Answer 2

You can use .getValue() method to get the value of slider

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

Here is a demo http://jsbin.com/detapa/2/edit?html,js,output