Testing input range with mousemove value

HTML

<div style="height: 480px; padding-top: 50px">
    <input type="range" name="timeline" id="timeline" step="0.0001" style="width: 416px">
    <div>Mouse move value: <span id="mouse"></span></div>
    <div>Input range Value: <span id="value"></span></div>
</div>

JavaScript

let timeline = document.querySelector('#timeline');
let value = document.querySelector('#value');
let mouse = document.querySelector('#mouse');

timeline.addEventListener("change", function(e) {
    value.innerHTML = this.value;
});

timeline.addEventListener("mousemove", function(e) {
    console.log(e);
    mouse.innerHTML = e.offsetX * 100 / e.target.clientWidth;
});