Как получить ТОЛЬКО значение перемещаемого маркера с помощью ползунка jQuery вместо обоих маркеров?

Question

Я хочу обновить одно поле со значениями из двух дескрипторов, но только индивидуально. Слайдер возвращает эти 2 значения в массиве каждый раз, когда либо обрабатывает слайды, поэтому мой элемент всегда сначала обновляется первым значением дескриптора, а затем вторым значением дескриптора, а не ТОЛЬКО значением скользящего дескриптора. Как я могу получить значение только из дескриптора, выполняющего скольжение?

Я попытался добавить функцию onChange для обновляемых входов, но по какой-то причине это не сработало.

https://jsfiddle.net/xstatic/6jm2prwL/5/

HTML

<div id="slider">

</div>


<div id="response">

</div>

JS

  jQuery('#slider').slider({

  min: 0,
  max: 100,
  step: 1,
  values: [0, 100],
  slide: function(event, ui) {




    for (var i = 0; i < ui.values.length; ++i) {

      theresult(ui.values[i]);

    }

  }

});

function theresult(theresult) {

  jQuery('#response').html(theresult);


}

Answer 1

Избавься от тебя за l oop. Вместо этого вызывайте каждый результат отдельно. Поэтому вместо этого:

for (var i = 0; i < ui.values.length; ++i) {
    theresult(ui.values[i]);
}

Сделайте что-то вроде этого:

alert(ui.values[0]);
alert(ui.values[1]);

Или, если вам нужно, чтобы они оба go в div "response", вы можете вызвать их индивидуально и объединить их в виде строки (например, вместо l для 1014 * или двух приведенных выше предупреждений):

theresult(ui.values[0] + ',' + ui.values[1]);

Любое из этих значений даст вам индивидуальные значения. Вы можете сохранить отдельные значения в переменные и сравнить их со старыми версиями, чтобы увидеть, изменились ли они. Как это:

var min = 0;
var max = 100;
jQuery('#slider' ).slider({
  min: 0,
  max: 100,
  step: 1,
  values: [0, 100],
  slide: function(event, ui) {
    var newMin = ui.values[0];
    var newMax = ui.values[1];
    if (newMin != min) {
        theresult("Minimum changed: " + newMin);
      min = newMin;
    }
    else if (newMax != max) {
        theresult("Maximum changed: " + newMax);
      max = newMax;
    }
  }
});

function theresult(theresult) {
  jQuery('#response').html(jQuery('#response').html() + '<br>' + theresult);
}