Как сохранить значение каждого слайдера только при его перемещении?

Question

У меня есть 3 диапазона слайдера:

<div class="container">
  <div class="row" id="time" >
    <div class="col-xs-4">
      Days: <b>1</b> <input id="days" type="text" class="span2" value="" data-slider-min="1" data-slider-max="31" data-slider-step="1" data-slider-value="[0,31]"/> <b>31</b>
    </div>
    <div class="col-xs-4">
      Months: <b>January</b> <input id="months" type="text" data-provide="slider" data-slider-step="1" data-slider-min="0" data-slider-max="12" data-slider-tooltip="show" data-slider-value="[0,12]" /> <b>December</b>
    </div>
    <div class="col-xs-4">
      Years: <b>0</b> <input id="years" type="text" class="span2" value="" data-slider-min="0" data-slider-max="2017" data-slider-step="1" data-slider-value="[0,2017]"/> <b>Today</b>
    </div>
  </div>
</div>

И я бегу следующие JS:

var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
getData = function() {
    var data = {};
  var temp = $('#days').slider().val().split(',');
  data.days = temp[0];
  temp = $('#months').slider().val().split(',');
  data.months = months[temp[0]];
  temp = $('#years').slider().val().split(',');
  data.years = temp[0];
  console.log(data);
}
$("#days, #years").slider({
  tooltip: 'always',
});  
$('#months').slider({
    formatter: function(value) {
    return months[value[0]] + " : " + months[value[1] - 1];
    }
});
$("input").on("slide", function(slideEvt) {
    getData();
});

В основном, когда мы двигаем sliderконсоль выводит ток value текущего value и вывод:

{days: "12", months: "July", years: "1396"}

Это хорошо, но если я переместу второй ползунок, потому что я хочу сделать диапазон, второе значение не отображается, пока оно должно быть:

{days: "12", days: "24", months: "July", months: "September", years: "1396", years: "1842"}

Но каждое значение или оба должны появляться только тогда, когда мы на самом деле slider

Вот это jsFiddle, проверьте консоль

Обратите внимание, что на самом деле мне понадобятся значения в этом формате, так как они будут рассматриваться как классы для некоторых элементов:

пример

day22 
february
year1632

Answer 1

Объекты не могут иметь повторяющиеся ключи, поэтому вам придется использовать другую структуру данных. Вы могли бы, например, позволить data быть массивом из двух объектов, и тогда каждый из этих двух объектов будет иметь свойство day, month и year:

getData = function() {
    var data = [];
    for (var i = 0; i < 2; i++) {
        data.push({
            day: $('#days').slider().val().split(',')[i], 
            month: months[$('#months').slider().val().split(',')[i]],
            year: $('#years').slider().val().split(',')[i], 
        }) ;
    }  
    console.log(data);
}

Или, если вы предпочитаете объединять дни в паре и одинаково для месяцев и лет, вы можете разрешить каждому из этих трех свойств быть массивом с двумя значениями:

getData = function() {
    var data = {
        days: $('#days').slider().val().split(','), 
        months: $('#months').slider().val().split(',').map(i => months[i]),
        years: $('#years').slider().val().split(',')
    }  
    console.log(data);
}

Еще одна проблема

Ползунок месяца допускает слишком большое одно значение (имеется 13 значений от 0 до 12 включительно), поэтому необходимо внести следующие изменения в свойства ползунка месяца:

data-slider-max="11"

и в коде:

$('#months').slider({
    formatter: function(value) {
        return months[value[0]] + " : " + months[value[1]]; // not -1
    }
});