input event with input[type="range"]

testing to see if using input event works better than change

by kougiland

HTML

<div style="margin-top: 1em">
    <h2>Price</h2>
    $51<input id="price" type="range" step=".001" min="51" max="360" value="51" />$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);