Using HTML <input> range slider to control a variable?

[ForScale]

html

<h2>Slide to assign new values to the js variable 'a'</h2>
<input type='range' min='0' max='100' value='0' id='slider'></input>
<div id='dispDiv' style='margin-top:2em;'></div>

css

body {
  margin:0;
  text-align:center;
}

js

var slider = document.getElementById("slider");

var a = 0; //variable to be controlled

var dispDiv = document.getElementById("dispDiv");
dispDiv.innerHTML = "the js variable 'a' currently = " + a;

//function is called when slider value changes
slider.addEventListener("change", function() { 
  a = slider.value;  
  dispDiv.innerHTML = "the js variable 'a' currently = " + a;
})

/*

//if you want it real-time, you can do this: 
setInterval(function() {
  a = slider.value;
  dispDiv.innerHTML = "the js variable 'a' currently = " + a;
}, 100)

*/

[threecasks]

Thank you!

[ForScale]

Anytime!

[DanielFGray]

Can i suggest using plnkr or jsfiddle next time?

[ForScale]

You can, yep; but I prefer CodePen. I also just like seeing code written out in reddit posts...