javascript - Material Design Lite slider 更新

Question

我一直在尝试使用MDL sliders制作我的网站，但我遇到了问题。 然而，当我尝试通过 jQuery 更改 slider 的值时，一切正常。 ， slider 的“栏”未同步，如下所示:

或者“蓝色圆圈”没有着色(请注意，默认值是禁用 slider 颜色的最小值，当我更新它时，它不会恢复颜色):

我用来更改 slider 值的代码:

  $("#mySlider").val(10);

但它不会更新图形部分，只会更新值。

这是处理条形颜色的属性:

最小可重现示例:

要重现此内容，请插入 slider使用默认值，然后使用上面的 javascript 代码更改它来更改值。

Answer 1

您不应该像这样更改值，有一种原生方法:

$('#click').on('click', function() {
  $('#mySlider').get(0).MaterialSlider.change(10);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.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">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

<input class="mdl-slider mdl-js-slider" id="mySlider" type="range" min="0" max="100" value="25" tabindex="0">

<button id="click" class="mdl-button mdl-js-button mdl-button--raised">
  Update
</button>