Input type range dont update it visual on value change

I am changing value of input type=“range” in javascript like so:



<div class="item-input-wrap">
      <div class="range-slider range-slider-init" data-label="true">
            <input type="range" value="50" min="0" max="100" step="1" name="photo-quality" id="photo-quality">
      <div style="padding-top:5px;">Quality: <span id="settings-current-quality"></span></div>

In fact its value is changing, but it visuals stays the same. I mean it look the same to the user, so after i change it to 10 it still looks like its 50! How to update its visuals? If this is a bug please fix it soon :frowning:
Maybe there is some workaround i can move the slider myself?? Please help :frowning:

Look at this example of this issue:

I made a setInterval loop. I am changing value of checkbox and range every second to 10 or 90.
I added css rule display:block; so the input[range] is visible. The slider is not updating. Any fix?

You need to use API to set range value

1 Like