Schaffung eines Schiebers mit editierbaren Nummernfeld in Material Design lite

Question

Gibt es eine Möglichkeit, einen Schieber und daneben ein editierbares Feld mit ihm haben aktuelle Wert ist?

Ich benutze MDL und nicht Polymer, weil sein geringes Gewicht und sollte mit lokal geleiteter Software verteilt werden.

Answer 1

Dies ist ein Weg:

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

und

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

- den Code und die Geige aktualisiert, um den Schieber zu machen zu aktualisieren, wenn der Wert im Feld eingegeben wird -

https://jsfiddle.net/n6xy84ov/

Ich denke, es sollte einen besseren Weg geben, bezogen auf meine Frage hier: Fetching the value of a mdl-textfield