Material Design Lite 滑块更新

Question

我一直在尝试使用 MDL sliders 来制作我的网站，但我遇到了问题。一切正常，但是，当我尝试通过 jQuery 更改滑块的值时，滑块的 "bar" 未同步，您可以在此处看到：

或者 "blue circle" 没有着色（请注意，默认值是禁用滑块颜色的最小值，当我更新它时，它不会恢复颜色）:

我用来更改滑块值的代码：

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

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

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

最小可重现示例：

要重现这一点，请插入一个带有默认值的 slider，然后使用上面的 javascript 代码来更改它。

Answer 1

虽然 value 属性用于设置滑块的初始值，但它不应该用于以编程方式修改值；相反，请使用 MDL change() 方法。例如，假设 slider1 是一个滑块对象，newvalue 是一个包含所需值的变量，不要使用 slider1.value = newvalue;相反，使用 slider1.MaterialSlider.change(newvalue)

Answer 2

你不应该那样改变value，有一个本地方法：

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

Material Design Lite 滑块更新

Material Design Lite slider update

javascript

jquery

material-design-lite