HTML5 Range Slider - onchange v/s oninput events

The behaviour of the input event compared to the change event is not exactly the same in different browsers when applied to a range slider.

A common UI pattern for a range slider is to allow the user to move the slider and display the value of it somewhere on the page, changing the displayed value as the user moves the slider.

I think the expected behaviour in such a case is that the value should display instantly, as the user is moving the slider, rather than the page waiting for the slider to finish moving before the displayed value is updated.

I suppose there could be cases where you prefer a delay over instant results, but I think the expected behaviour is to display the results instantly.

I have share this below code for good experience with onchange event and display value in output tag of html5.
So let us see following code section by section.
1. JavaScript code section

 

var i = document.querySelector('input'),
    o = document.querySelector('output');

o.innerHTML = i.value;

i.addEventListener('change', function () {
  o.innerHTML = i.value;
}, false);

2. Html code section

3. Css code section

 
body {
  padding: 40px;
}

input {
  display: block;
  width: 200px;
  margin: auto;
}

output {
  text-align: center;
  display: block;
  padding-top: 15px;
}