bootstrap-slider

iterate through several bootstrap sliders and get range values within an each function

I have a page with several bootstrap-sliders. Here's a representative example:

<label>My Label 1</label>
<input id="mySlider1" data-slider-id='mySlider1' type="text"/>      

<label>My Label 2</label>
<input id="mySlider2" data-slider-id='mySlider2' type="text"/>

Here's the javascript definition for the sliders:

$("#mySlider1").slider({
    min: 0,
    max: 5000,
    value: [0, 5000]
});

$("#mySlider2").slider({
    min: 0,
    max: 5000,
    value: [0, 5000]
});

At some point I want to iterate through all the sliders and get their range values from within the 'each' loop:

$('.slider').each(function(){
    var key = $(this).attr("id");
    var value = $(this).val();  /* <- this is the problem line */
    console.log("key = " + key + ", value = " + value);
});

The console prints out:

key = mySlider1, value = 
key = mySlider2, value =

I would like to see 'value' as a 2-element array for the range [0,5000].

Solution

  • The issue here is that you are attempting to iterate over .slider, which is a class reserved for bootstrap-slider's way of making a slider. You should add a slider to your input elements instead, such as in this jsfiddle: https://jsfiddle.net/a3wdzyck/