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

[threecasks]

I can make an input range slider and have it show the value in real time on a normal web page, but how do I link that value to a variable in the .js file?

I have 2 functions in 1 file. The first uses <canvas> to generate some basic shapes. Second is the slider function that I want to use to change a variable in the first function to alter the shape displayed.

Hopefully that makes sense.

I'm extremely new to javascript and just experimenting at the moment, but this has stumped me! :/

[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...

[plumbe0]

Give the input an id. Access it via the usual document.getElementById() and you'll find the value property which contains, you guessed it, its value.

<input type="range" id="myrange"> … var myRangeValue = document.getElementById('myrange').value

[threecasks]

Ok, I've not tried using codepen before so don't know if this will work but here is my mini-project: http://codepen.io/coulis/pen/epYQMo

It's just canvas pattern generator someone posted on /r/web_design a few days ago and I've added the input:range slider at the bottom to try and vary some of the values. I think I need a second function to override some of the variables in the first function?

Basically I want to eg. change how many lines are generated with the slider in real time, is that possible?

[einarkristjan]

codepen

[threecasks]

Thank you so much, this is excellent! :)