javascriptjquerymaterial-design-lite

Material Design Lite slider update

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 :

enter image description 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) :

enter image description here

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 :

enter image description here

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.

Solution

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