index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>input range slider (html5 & p5js)</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.2.8/p5.min.js"></script>
<script src="sketch.js"></script>
</head>
<body>
<input type="range" id="slider" name="slider" min="0" max="100">
</body>
</html>
sketch.js
var slider;
function setup() {
createCanvas(960, 480);
background(0);
slider = document.getElementById("slider");
}
function draw() {
for (var i=0; i < slider.value; i++) {
fill(Math.random() * 255, Math.random() * 255, Math.random() * 255);
ellipse(Math.random() * 960, Math.random() * 500, Math.random() * 50, Math.random() * 50);
}
}