# [JS30] Day.28 Video Speed Controller UI
###### tags: `JS30`
## 任務 Task
結合 `video` 及 `mousemove` 製作出可滑動控制速度的控制欄。

==完成時間：10min==
## 步驟 Step
1. 監聽控制欄的 `mousemove` 事件。
2. 計算鼠鍵位於控制欄的百分比，並改變控制條的位置。
3. 使速度數值介於 0.4 ~ 4.0 之間並呈現在控制條內。
4. 將影片速度更改為控制條數值。

const speed = document.querySelector('.speed');
const bar = speed.querySelector('.speed-bar');
const video = document.querySelector('.flex');
function handleMove(e) {
    const y = e.pageY - this.offsetTop;
    const percent = y / this.offsetHeight;
    const min = 0.4;
    const max = 4;
    const height = Math.round(percent * 100) + '%';
    const playbackRate = percent * (max - min) + min;
    bar.style.height = height;
    bar.textContent = playbackRate.toFixed(2) + '×';
    video.playbackRate = playbackRate;
}
speed.addEventListener('mousemove', handleMove);