You can achieve this using just plain HTML5 and JavaScript.
HTML5 has an input type called range, and it behaves exactly as you want for this example.
Note that according to CanIUse, the actual major browser support for input[type="range"]
is: IE10+, FF23+ and Chrome 5+.
To achieve what you want you should first create the element:
and then listen to its changes with js (I'm using jQuery for the example bellow):
$('#slider').on('change',function(){
var val = $(this).val();
//do the rest of the action...
});
Here is a working example of what you want: http://jsfiddle.net/vNfh2/1/