Ползунок диапазона <input>не сбрасывает значение цвета

Question

Ползунок до сброса находится в этом положении: (большой палец и цвет находятся в правильном положении)

Перед сбросом:

HTML

<input id="xyzslider" class="mdl-slider mdl-js-slider" type="range" min="0.0" max="1.0" value="0.0" step="0.05" tabindex="20">

Jquery

$("#xyzslider").val(value);

После сброса:

Вот моя проблема.Бегунок ползунка сбрасывается до минимального значения, но значение цвета, представленное ползунком, по-прежнему равно 0,6.

После этого я перезагружаю ползунок следующим образом.

Jquery

$("#xyzslider").val(minValue);

Мой код указан ниже.В чем может быть проблема здесь?Почему значение цвета ползунка не сбрасывается?Любая помощь будет неоценимой.

$("#xyzslider").val(0.6);

$("#clickme").click(function() {
  $("#xyzslider").val(0.0);
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">

<br>
<input type="button" id="clickme" value="Click Me To Reset Slider">
<input id="xyzslider" class="mdl-slider mdl-js-slider" type="range" min="0.0" max="1.0" value="0.0" step="0.05" tabindex="20">

Посмотреть на JSFiddle

Answer 1

Согласно описанию ползунка mdl "Хотя атрибут value используется для установки начального значения ползунка, его не следует использовать для программного изменения значения; вместо этого используйте метод MDL change (). Например,предполагая, что slider1 является объектом слайдера, а newvalue является переменной, содержащей желаемое значение, не используйте slider1.value = newvalue; вместо этого используйте slider1.MaterialSlider.change (newvalue) "

https://getmdl.io/components/#sliders-section

Обновите ваш код, например

$("#xyzslider")[0].MaterialSlider.change(minValue);

Обновлено в jsfiddle: https://jsfiddle.net/qahf2wuL/12/