input event with input[type="range"]

testing to see if using input event works better than change

by tanvir_alam_shawn

HTML

<div style="margin-top: 1em">
    <h2>Price</h2>
    $51<input id="price" type="range" min="0" max="100" step="1" value="" />$360
</div>

<p id="result"></p>

CSS

#result {
    font-size: 2em;
}

JavaScript

/* oninput event handler (and input event handler event types) on html5 input[type="range"] 
   by @girlie_mac

In this example, both "change" and "input" behave the same.

See another example at http://jsfiddle.net/girlie_mac/CcqU7/

*/

var p = document.getElementById("price"),
    res = document.getElementById("result");

p.addEventListener("input", function() {
    res.innerHTML = p.value;
    
}, false);