JS30 Challenge Day 28 - Video Speed Controller

Github Link

Here we want to calculate the height of the filled bar.

So we take a Y co-ordinate from the event.

We take the offset at which the top of the parent is.

We subtract the offset from the Y co-ordinate, which gives us just how much of the bar is to be filled, call it Y.

Next we want to calculate the height %

So we divide Y by the total height of the parent.

Y/offsetHeight gives us the decimal %

Multiply that by 100 and we get just how much % of space is to be filled by speed-bar.

After that, we need to find the number associated with that much height and use it as playback rate.

At 0 height it should be 0.4

At 100 height it should be 2.5

so we do percent*(max-min)+min

element.textContent

sets the text value of our bar.

number.toFixed(x);

displays the number with x decimal places