在 Material Design lite 中创建具有可编辑数字字段的滑块答案

【问题标题】：creating a slider with editable number field in material design lite在 Material Design lite 中创建具有可编辑数字字段的滑块
【发布时间】：2015-12-01 20:27:57
【问题描述】：

有没有办法让滑块和旁边的可编辑字段与它的当前值？

我使用的是 MDL 而不是聚合物，因为它重量轻，应该与本地运行的软件一起分发。

【问题讨论】：

标签： material-design-lite

【解决方案1】：

这是一种方式：

<input class="mdl-slider mdl-js-slider" type="range"
  min="0" max="100" value="50" tabindex="0" id = "slide_01">
<form action="#">
  <div class="mdl-textfield mdl-js-textfield" id="text_01">
    <input class="mdl-textfield__input" type="text" >
  </div>
</form>

和

$('#slide_01').on('input',function(){
   $("#text_01").get(0).MaterialTextfield.change(this.value);
});
$('#inp_text_01').keyup(function() {
   $("#slide_01").get(0).MaterialSlider.change($('#inp_text_01').val());
});

-- 更新了代码和小提琴，使其在字段中输入值时更新滑块--

https://jsfiddle.net/n6xy84ov/

我觉得应该有更好的办法，这里指我的问题：Fetching the value of a mdl-textfield

【讨论】：

很好，但它不能反向工作，当我编辑文本框时，滑块不会改变。
好点。关键是使用 MaterialSlider.change() 方法。我更新答案