Material Design Lite slider update

Question

I've been trying to use MDL sliders to make my website, but I get a problem. Everything is working, however, when I try to change the value of the slider through jQuery, the "bar" of the slider isn't synced as you can see here :

or the "blue circle" isn't colored (note that the default value is the minimum one which disables the color of the slider and when I update it, it doesn't put the color back) :

The code I'm using to change sliders value:

  $("#mySlider").val(10);

But it doesn't update the graphical part, only the value.

This is the property which handles the bar color :

Minimal reproducible example:

To reproduce this, insert a slider with a default value then change it using the above javascript code to change the value.

Answer 1

You shouldn't change value like that, there is a native way:

$('#click').on('click', function() {
  $('#mySlider').get(0).MaterialSlider.change(10);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

<input class="mdl-slider mdl-js-slider" id="mySlider" type="range" min="0" max="100" value="25" tabindex="0">

<button id="click" class="mdl-button mdl-js-button mdl-button--raised">
  Update
</button>

Answer 2

Although the value attribute is used to set a slider's initial value, it should not be used to modify the value programmatically; instead, use the MDL change() method. For example, assuming that slider1 is a slider object and newvalue is a variable containing the desired value, do not use slider1.value = newvalue; instead, use slider1.MaterialSlider.change(newvalue)