Estimate mousemove value input range wrong

I need to show input range value tooltip at cursor (mouse move). But after click value of input range incorrect as i saw.

Here is my code:

<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>

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) {
    mouse.innerHTML = e.offsetX * 100 / e.target.clientWidth;
});

Run on jsfiddle

Lets me know where is wrong!!