<div class="wrapper">
	<label for="numocControl">numOctaves</label>
	<input type="range" min="1" max="10" value="1" step="1" id="numocControl"/><span id="value">1</span>

<svg width="250" height="250">
  
  <filter id='noise2' x='0%' y='0%' width='100%' height='100%'>
      <feTurbulence baseFrequency="0.03" numOctaves="1" />
</filter>
  
  <rect x="0" y="0" width="100%" height="100%" filter="url(#noise2)" fill="none">
    
</svg>
	</div>
	
@import url('https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz');

body {
	padding: 5vw;
	font-family: 'Yanone Kaffeesatz', sans-serif;
	background-color: #212121;
	color: #fff;
}

svg {
	display: block;
	width: 100%;
	margin-top: 1em;
	background: #fff;
}

input[type="range"]{
	max-width: 300px;
}

#value {
	font-size: 1.1em;
	margin-left: .5em;
}

label {
	font-size: 1.5em;
	display: block;
	margin-bottom: 1em;
}

.wrapper {
	max-width: 80%;
}
View Compiled

//numoc Control
(function() {
	var numocControl = document.getElementById("numocControl"),
		numocSVG = document.querySelector("#numocControl ~ svg"),
		effect = numocSVG.querySelector("feTurbulence"),
		val = document.querySelector("#value");

	numocControl.addEventListener("change", updatenumocSVG);
	numocControl.addEventListener("input", updatenumocSVG);

	function updatenumocSVG() {
		let v = numocControl.value;
		val.innerText = v;
		effect.setAttribute("numOctaves", v);
	}
})();
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.