Creating a range slider, no jQuery

Question

How would I go about creating a range slider, like shown below (only the horizontal one)? Everytime the user moves the slider the value should be sent to a JavaScript function.

I don't want to use jQuery or any other pre-made script. I want to code it myself so I understand it. No HTML5 either as it's rather new and a vast majority of people won't have HTML5 enabled browsers.

Answer 1

You can use 'range' input type of HTML5,

Minimum value<input type="range" id="myrange" min="1" max="100" step="1" onchange="updateValue(this.value);> Maximum value

Here is a javascript function which shows value:

<script type="text/javascript">
function updateValue(val) {
  alert(val) ;
}

Answer 2

You mean something like this?

html(5) :

min<input type="range" id="slider" min="1" max="10" > max
<div id="output"> </div>

javascript :

window.addEventListener("load", function(){
     var slider = document.getElementById("slider");
     slider.addEventListener("change", function(){
         document.getElementById("output").innerHTML = "value : " + this.value;
    });
});

jsfiddle : http://jsfiddle.net/z39Ne/3/

It is pretty easy to follow. If you have any questions just comment : ).