Q:

input event - losing focus while dragging input element

I'm trying to make a score module using a range input.  I'm using the input event to achieve this.  The range input works fine, but when I add event, it loses focus shortly after dragging begins. 
This is how it looks:

document.querySelector("#score").addEventListener("input", e => {
  console.log(e.target.value);
});
<input type="range" min="1" max="10" value="10" draggable="true" class="score theme" id="score" step="0.1">

A:

That happens because you added draggable="true" to the element.  So the behaviour is ambiguous, should the browser allow you to move the trackball or should the browser drag the element around the page? 
The two behaviours are conflicting, so in the first moment it works properly as an input range and you're able to move it around, but then it allows you to drag the element. 
What's your expected behaviour? 

document.querySelector("#score").addEventListener("input", e => {
    console.log(e.target.value);
 });
    <input type="range" min="1" max="10" value="10" class="score theme" id="score" step="0.1">

    

