I'm writing a program to change the positions of some subtitles. The user uploads a video, gets a thumbnail from the video, and then the editor shows up. A lot of the time, the clientWidth or clientHeight for the thumbnail just doesn't work and it breaks the range sliders. If you refresh though, it sometimes starts working again. I have no idea what the problem is, some help would be much appreciated.

    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';

Here is the fiddle.

Btw, I am aware the vertical slider is very hardcoded, but I will fix it later.