JSFiddle - React, Tailwind, and code Playground

by zhukovroman

HTML

<div class="progressBox" id="progresBox">
    <div id="seek" class="seek">
      <div id="timecode"></div>
    </div>
    <div id="bufer"></div>
    <div class="progress-bg">
      <div id="endTime"></div>
    </div>
</div>
<div id="mousepos"></div>

CSS

.progressBox {
    padding-top: 50px;
}

#seek {
    height: 30px;
    width: 100%;
    background: blue;
}

#mousepos {
    padding-top: 30px;
}

JavaScript

$("#seek").mousemove(function(e) {
    var relativePosition = {
        left: e.pageX - $(document).scrollLeft() - $('.progressBox').offset().left,
        top: e.pageY - $(document).scrollTop() - $('.progressBox').offset().top
    };
    var seekwidth = $('#seek').width();
    $('#mousepos').html('<p>x: ' + relativePosition.left + ' relative: ' + relativePosition.left/seekwidth + '% </p>');
});