Working with HTML5 Range Input

View Example

I felt compelled to post this HTML5 range input example because I couldn’t find code online that didn’t rely on JQuery to output a value (not that I have anything against it, just that it can be overkill for simple things like this).

The code below outputs the value of the range to a nearby <span>. I created a “showOutput” function to make it easier to use with multiple inputs.

window.addEventListener('load', initSlider, false);
/**
* Initializes sliders
*/
function initSlider(){
	// get range input
	var myRange = document.getElementById("myRange");
	myRange.addEventListener('change', function(){showOutput(myRange, "rangeOuput")}, false);
	document.getElementById("rangeOuput").innerHTML = rangeOuput.value;

	// call range input on window init to display initial value
	showOutput(myRange, "rangeOuput");
	/**
	* Displays output to text fields.
	* @param slider		id of range input
	* @param field		id of span to write value.
	*/
	function showOutput(slider, field){
		document.getElementById(field).innerHTML = slider.value;
	}
}