EDGE Browser - customized input type="range" value is not changing on first click on slider track

Question

I have a created a customized range input referring this. It's working fine on Chrome, IE and EDGE, however, there is one problem on EDGE. The first click on slider track changes the thumb position but not the value. The subsequent clicks works fine.

Please open this fiddle in EDGE for observing this behavior.

HTML: 

<input id="sel" type="range" min="5" max="100" value="50" step="5">
<h3>Slider Value: <span id="range"></span></h3>

JS:

(function () {
  var sel = document.querySelector('#sel');
  document.querySelector('#range').innerText = sel.value;
  sel.addEventListener('change', function (){
    document.querySelector('#range').innerText = sel.value;
  });
})()

CSS:

#sel {
  width:500px;
}

input[type=range] {
 -webkit-appearance: none;
 margin: 18px 0;
 width: 100%;
}
input[type=range]:focus {
 outline: none;
} 

input[type=range]::-webkit-slider-runnable-track {
 width: 100%;
 height: 8.4px;
 cursor: pointer;
 box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
 background: #3071a9;
 border-radius: 1.3px;
 border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
 box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
 border: 1px solid #000000;
 height: 30px;
 width: 30px;
 border-radius: 100%;
 background: #ffffff;
 cursor: pointer;
 -webkit-appearance: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
 background: #367ebd;
}

input[type=range]::-ms-track {
 width: 100%;
 height: 8.4px;
 cursor: pointer;
 background: transparent;
 border-color: transparent;
 border-width: 16px 0;
 color: transparent;
}
input[type=range]::-ms-fill-lower {
 background: #2a6495;
 border: 0.2px solid #010101;
 border-radius: 2.6px;
 box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
 background: #3071a9;
 border: 0.2px solid #010101;
 border-radius: 2.6px;
 box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 30px;
  width: 30px;
  border-radius: 100%;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
  background: #367ebd;
} 

Appreciate your help.

Answer 1

从处理try? f("a") ?? f("b") ?? f("c")事件切换为处理change似乎可以解决问题：

input

https://jsfiddle.net/tz1mhys0/

似乎在Chrome上仍然可以正常使用，我目前无法测试其他浏览器。如果您发现其中sel.addEventListener('input', function (){ document.querySelector('#range').innerText = sel.value; }); 无效的地方，我想为这两个事件添加处理程序也可能不会造成太大的伤害。