javascript - <input> 范围 slider 不重置颜色值

Question

重置前的 slider 在这个位置:(拇指和颜色都在正确的位置)

重置前:

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);

重置后:

这是我的问题。 slider 拇指重置为最小值，但 slider 表示的颜色值仍为 0.6。

在此之后，我按以下方式重置 slider 。

Jquery

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

我的代码如下。这里可能是什么问题？为什么 slider 颜色值没有被重置？任何帮助都是无价的。

$("#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">

View on JSFiddle

Answer 1

根据mdl slider的描述“虽然 value 属性用于设置 slider 的初始值，但它不应该用于以编程方式修改值；而是使用 MDL change() 方法。例如，假设 slider1 是一个 slider 对象和 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/