- Using the mousemove is discouraged and would complicate the solution. It is better to use the 'input' event.
- The change event should be dispatched as soon as the user as commited himself to a specific value (mouserelease, keyup or blur), but beware Chrome and IE10 have bad implementations of this different input/change event behavior. (see: https://code.google.com/p/chromium/issues/detail?id=155747)
- If you want to learn JS, learn how to structure your JS and think in components. This is a lot more important than using native JS vs. JQuery. For example, you are using ids. This means you can only have one mediaplayer on one page. You are omitting the third parameter of addEventListener. And so on....
So the explanation how to get things done. Depends wether you are testing in a standards compilant browser (currently only FF) or in x-browser enviroment.
To get the current value of an input while the user is interacting with it, simply use the input event:
range.addEventListener('input', onInput, false);
Here is a working demo for FF: http://jsfiddle.net/trixta/MfLrW/
In case you want to get this work in Chrome and IE, you have to use the input/change and treat them like it would be only the input event. Then you need to compute the "change" event yourself, which isn't really simple. But here is a working example for you: