Search code examples
material-design-lite

creating a slider with editable number field in material design lite

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

I am using MDL and not polymer, because its light weight and should be distributed with locally run software.

Solution

  • This is a 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 the fiddle to make it update the slider when the value is entered in the field --

    https://jsfiddle.net/n6xy84ov/

    I think there should be a better way, referring to my question here:Fetching the value of a mdl-textfield