Input type range dont update it visual on value change

Questions
1

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

$$('#photo-quality').val(10);

html:

<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>
      <div style="padding-top:5px;">Quality: <span id="settings-current-quality"></span></div>
</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:

2

Look at this example of this issue:
ezgif.com-gif-maker

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?

3

You need to use API to set range value https://framework7.io/docs/range-slider.html#range-slider-methods-properties

1 Like