Creating a slider with an editable field with a number in the material lite

Question

Is there a way to have a slider and next to it an editable field with its current value?

I use MDL, not polymer, because it is light in weight and should be distributed with local software.

Answer 1

This is the way:

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

and

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

- updated the code and script to update the slider when the value is entered in the field -

https://jsfiddle.net/n6xy84ov/

I think there should be a better way, citing my question here: Getting the value of the mdl-text field