Estoy escribiendo un programa para cambiar las posiciones de algunos subtítulos. El usuario carga un video, obtiene una miniatura del video y luego aparece el editor. Muchas veces, clientWidth o clientHeight para la miniatura simplemente no funcionan y rompen los controles deslizantes de rango. Sin embargo, si actualiza, a veces comienza a funcionar nuevamente. No tengo ni idea de cuál es el problema, agradecería mucho la ayuda.

 example.style.left = width.value; thumbWidth = thumb.clientWidth - example.clientWidth; thumbHeight = thumb.clientHeight - example.clientHeight; width.setAttribute('max', thumbWidth); console.log(thumb.clientWidth); width.setAttribute('value', thumbWidth / 2); subWidth(); height.setAttribute('max', thumbHeight); height.setAttribute('value', thumbHeight / 2); subHeight(); width.style.width = thumb.clientWidth + 'px'; console.log(thumb.clientWidth); height.style.width = thumb.clientHeight + 'px'; editor.style.width = thumb.clientWidth = 'px'; editor.style.height = thumb.clientHeight + 'px';

Aquí está el violín .

Por cierto, soy consciente de que el control deslizante vertical está muy codificado, pero lo arreglaré más tarde.