重置之前的滑块位于此位置:(拇指和颜色均处于正确位置)
重置前:
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">
答案 0 :(得分:4)
根据mdl滑块的描述 &#34;虽然value属性用于设置滑块的初始值,但不应该用它来以编程方式修改值;相反,使用MDL change()方法。例如,假设slider1是一个滑块对象而newvalue是一个包含所需值的变量,请不要使用slider1.value = newvalue;相反,使用slider1.MaterialSlider.change(newvalue)&#34;
https://getmdl.io/components/#sliders-section
所以更新您的代码,如
$("#xyzslider")[0].MaterialSlider.change(minValue);
在jsfiddle中更新: https://jsfiddle.net/qahf2wuL/12/