value on slider updates not reflected in --value1

[acroyear]

<label class="slider" style="---start: 0%; ---end: 99.42263279445727%; ---value1: '0'; ---value2: '0';"><input type="range" step="0.1" max="785.448" min="0" value="243.255567"></label>

framework is michijs web-components.

the value of the input updates regularly but the --value# items that clearly control the UI aren't updating to match it.

[acroyear]

context - the slider is mapped to the current time (and max = duration) of a song for a music player.

[acroyear]

ok, to clarify - it updates just fine first time when the player page is loading. it stays working even if the value is changed by other means (e.g., setting the html5 audio tag the ranger is mapped to's value to something else via a 'skip 30 seconds' button.

but once the range input has been dragged, it won't update by itself anymore. it is frozen. it can drag and will set the value and the callback fires...but it won't update to changes in the value coming from the render method.

[leonardorafael]

Could you provide some code example to simulate the issue on https://codesandbox.io, https://codepen.io/ or https://jsfiddle.net/?

[acroyear]

unfortunately not so easy to replicate. issue seems to be in how web components render in this framework (not sure if react jsx would have the same problem), and rigging up a demo can't scale up since the code needs the framework i was using to render (again, MAYBE i could demo it in react but having found a workaround i need to just move on for now).

basically if value= is in the jsx, something got disconnected in a way.

the workaround was to go 'old school', remove the value= from the jsx and set it as valueAsNumber in javascript.

So i'll bookmark this and see if i can come back to it in a react or preact situation to see if the issue is JSX or web-components related or just an oddity with the framework I'm using.

[acroyear]

I'm having a similar issue with switches. If the value is changed solely by user action, it updates. but if the value changes as a result of a model change, the switch doesn't, well, switch.

again, seems to be an issue with using these in a JSX environment...and yes, it may be unique to michijs doing it. I haven't yet had the time to stage a react version to be sure. workaround is the same - find the element (querySelector/getElementBy ...) and explicitly set the checked property.

[acroyear]

in my context i'm still not seeing --value1 update as input value changes. The drag-slider moves but the label --value1 only changes on being dragged. This is 'new'.

mind you, I hadn't looked at this since the new | slide drag was changed.

neither by JSX nor by range.valueAsNumber

            const range = document.querySelector('.tv-player .range') as HTMLInputElement;
            if (range) {
                range.valueAsNumber = time;
            }

            (<label class="slider content">
                <input class="range" type="range" oninput={this.onRangeChange} min="0" max={state?.duration || 1} step={.10} value={time}></input>
                <span></span>
            </label>)

UPDATE - it seems ---end is what is not updating correctly here. When I added label.style.setProperty('---end', (((duration - time) / duration) * 100) + '%'); to the if (range) block, it works.

Should I file a new issue on this?

[acroyear]

(meanwhile - discovered with JSX the close of the input matters.

html example

<label class="slider large">
  <input type="range" value="25" min="0" max="100">
  <span></span>
  <div class="tooltip"></div>
</label>

JSX auto-closing:

<label class="slider large">
  <input type="range" value="25" min="0" max="100">
  <span></span>
  </input>
  <div class="tooltip"></div>
</label>

yeah, the latter oddly worked for the old version but didn't work right after. But at least that was an easy fix 😄