0

Slider before resetting is at this position: (both thumb and color are at proper position)

Before slider reset

Before Reset:

Html

<input id="xyzslider" class="mdl-slider mdl-js-slider" type="range" min="0.0" max="1.0" value="0.0" step="0.05" tabindex="20">

Jquery

$("#xyzslider").val(value);

After Reset:

Here is my problem. The slider thumb is reset to the minimum value but the color value represented by the slider is still at 0.6.

Slider after reset

After this i reset the slider in the following way.

Jquery

$("#xyzslider").val(minValue);

My code is below. What could be the issue here? Why is the slider color value not getting reset? Any help would be invaluable.

$("#xyzslider").val(0.6);

$("#clickme").click(function() {
  $("#xyzslider").val(0.0);
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script defer src="https://code.getmdl.io/1.3.0/material.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">

<br>
<input type="button" id="clickme" value="Click Me To Reset Slider">
<input id="xyzslider" class="mdl-slider mdl-js-slider" type="range" min="0.0" max="1.0" value="0.0" step="0.05" tabindex="20">

View on JSFiddle

showdev
  • 28,454
  • 37
  • 55
  • 73
sp497
  • 2,363
  • 7
  • 25
  • 43
  • Maybe I'm misunderstanding, but I [can't seem to reproduce the problem](https://jsfiddle.net/qahf2wuL/1/). Can you make a [working example](https://stackoverflow.com/help/mcve) to help demonstrate? – showdev Jun 11 '18 at 18:30
  • Provide css for your slider. – Alex Jun 11 '18 at 18:33
  • Hi @showdev i have updated the above jsfiddle which shows the problem. Link https://jsfiddle.net/qahf2wuL/9/ – sp497 Jun 11 '18 at 18:37
  • @Alex I have updated the above jsfiddle. – sp497 Jun 11 '18 at 18:39

1 Answers1

4

According to description of mdl slider "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)"

https://getmdl.io/components/#sliders-section

So update your code like

$("#xyzslider")[0].MaterialSlider.change(minValue);

Updated in jsfiddle: https://jsfiddle.net/qahf2wuL/12/

Alex S.
  • 622
  • 4
  • 6
  • Hi this does not work for me. I get the following error. "Cannot read property 'change' of undefined" i.e MaterialSlider is not defined. Where is the definition for "MaterialSlider"? How do i make Jquery know about it? – sp497 Jun 11 '18 at 18:43
  • 1
    Your updated [JSFiddle](https://jsfiddle.net/qahf2wuL/13/) as per @AlexS pointed out. – Alex Jun 11 '18 at 18:43
  • Hi, why use $("#xyzslider")[0] instead of just $("#xyzslider") ? – sp497 Jun 11 '18 at 18:48
  • 1
    MaterialSlider is not a module of jQuery, it used on DOM object directly – Alex S. Jun 11 '18 at 18:55
  • 1
    @SRINI794 See [What does $(selector)\[0\] mean in jQuery?](https://stackoverflow.com/questions/32783869/what-does-selector0-mean-in-jquery) – showdev Jun 11 '18 at 18:56
  • Works perfectly. Thanks! – sp497 Jun 11 '18 at 18:58