Create a Seekbar like vimeo video player (HTML5)

I tried to create a HTML5 video player from scratch. But I couldn't create a seekbar that slide nicely like vimeo(or youtube).

What I did is I added a extra div/span(that highlights the total viewed time) in the seekbar. Then I added mousedown & mousemove event. When mousedown event get called I make a var(Boolean) true. While it is true and I change the width of the div/span according to the mousemove position.

It works, but It's unresponsive. I can't slide it seamlessly. So I wanted to know how can build a responsive seekbar like vimeo(youtube is same but youtube player has a dot like a range slider, but I don't want that). I prefer pure JavaScript without any frameware or API.

My Code:

HTML

<html>

<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
</head>

<body>

    <div class="container">
        <video src="http://www.treatbd.com/Assets/vid.mp4" poster=""></video>
        <div class="controls">
            <!-- play/pause button -->
            <div class="play"></div>
            <!-- the seekbar -->
            <div class="line">
                <div class="elapsed"></div>
            </div>
            <div class="screen"></div>
        </div>
    </div>

</body>

</html>

CSS/SASS

html, body
   margin: 0
   padding: 0
   background-color: #272b32


.container
   height: 465px
   width: 808px
   margin: auto
   margin-top: calc(50vh - 270px)
   display: flex
   flex-wrap: wrap
   justify-content: center
   position: relative
   overflow: hidden
   border-radius: 1px

video
   background-color: aliceblue
   object-position: center
   width: 100%
   height: 100%
   display: block
   object-fit: cover

.controls
   background-color: transparent
   width: 100%
   height: 9%
   position: absolute
   left: 0
   right: 0
   bottom: 0
   display: flex
   transition: visibility 750ms

.controls *
   box-sizing: border-box
   border-left: 1px solid deepSkyblue

.play
   display: inline-block
   height: 100%
   width: 7%
   background: rgba(16,18,20, .4)

   &:hover
      background: rgba(16,18,20, .6)

.screen
   display: inline-block
   height: 100%
   width: 7%
   background: rgba(16,18,20, .4)

   &:hover
      background: rgba(16,18,20, .6)

.volume
   display: none

.line
   display: inline-block
   height: 100%
   width: 86%
   background: rgba(0, 5, 7, 0.45)
   position: relative

.elapsed
   position: absolute
   background: rgba(78, 144, 249, 0.4)
   height: 100%
   width: 0%
   transition: width 200ms

JavaScript

var video = document.querySelector("video");
var playButton = document.querySelector(".play");
var elapsed = document.querySelector(".elapsed");
var line = document.querySelector(".line");

var duration = video.duration;
var playing = false;
var mouseDown = false;

// the play/pause button
playButton.addEventListener("click", function() {
    if (playing) video.pause();
    else video.play();

    playing = !playing;
});

// click on the video to play/pause
video.addEventListener("click", function() {
    if (playing) video.pause();
    else video.play();

    playing = !playing;
});

// seekbar
line.addEventListener("mousedown", function(e) {
    // set current time according to mousedown position
    video.currentTime = Number(
        e.layerX / (line.clientWidth / 100) * (duration / 100)
    ).toFixed(1);
    // change the width of elapsed bar.
    elapsed.style.width = video.currentTime / (duration / 100) + "%";
    mouseDown = true;
});

line.addEventListener("mousemove", function(e) {
    if (mouseDown) {
        video.currentTime = Number(
            e.layerX / (line.clientWidth / 100) * (duration / 100)
        ).toFixed(1);
    }
});

line.addEventListener("mouseup", () => (mouseDown = false));

// to let the metadata loaded
var dt = setInterval(function() {
    if (video.readyState > 0) {
        duration = Number(video.duration).toFixed(2);
        clearTimeout(dt);
    }
}, 50);

// highgligh the amount of played time. via a elapse bar
setInterval(function() {
    elapsed.style.width = video.currentTime / (duration / 100) + "%";
}, 1000);

Solution

I was changing the currentTime according to mousemove.

line.addEventListener("mousemove", function(e) {
    if (mouseDown) {
        video.currentTime = Number(
            e.layerX / (line.clientWidth / 100) * (duration / 100)
        ).toFixed(1);
    }
});

and leaving the width of elapse bar to the currentTime. But I'm reading currentTime in every 1s.

setInterval(function() {
    elapsed.style.width = video.currentTime / (duration / 100) + "%";
}, 1000);

That's why it's not responsive. Even if I slide quickly, the width of the elapse bar will only move after another second.