材料設計で編集可能な数値フィールドを持つスライダを作成するlite

Question

スライダを配置する方法はありますか？その隣に、現在の値で編集可能なフィールドがありますか？

私はMDLを使用しています。軽量で、ローカルに実行されるソフトウェアと一緒に配布する必要があるため、ポリマーではありません。

Answer 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