tạo thanh trượt với trường số có thể chỉnh sửa trong thiết kế material design lite

Question

Có cách nào để có thanh trượt và bên cạnh nó là trường có thể chỉnh sửa với giá trị hiện tại không?

Tôi đang sử dụng MDL chứ không phải polymer, vì trọng lượng nhẹ và phải được phân phối bằng phần mềm chạy cục bộ.

Answer 1

Đây là một cách:

<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> 

và

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

- cập nhật mã và fiddle để làm cho nó cập nhật các thanh trượt khi giá trị được nhập trong lĩnh vực này -

https://jsfiddle.net/n6xy84ov/

Tôi nghĩ cần có cách tốt hơn, hãy tham khảo câu hỏi ở đây: Fetching the value of a mdl-textfield