переберите несколько ползунков bootstrap и получите значения диапазона в каждой функции

Question

У меня есть страница с несколькими bootstrap -ползунами . Вот типичный пример:

<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"/>      

Вот определение javascript для ползунков:

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

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

В какой-то момент я хочу перебрать все ползунки и получить их значения диапазона из внутри «каждого» l oop:

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

Консоль распечатывает:

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

Я бы хотел видеть 'value' как массив из 2 элементов для диапазона [0,5000].

Answer 1

Проблема здесь в том, что вы пытаетесь перебрать .slider, который зарезервирован для bootstrap-slider способа создания слайдера. Вместо этого вы должны добавить ползунок к элементам input, например, в jsfiddle: https://jsfiddle.net/a3wdzyck/