Show Numbers On Sliders

BoisterousCoder · BoisterousCoder · commit a64a461b638d · 2017-02-21T10:09:39.000-07:00
diff --git a/JS/MainLoop.js b/JS/MainLoop.js
@@ -30,7 +30,7 @@ function mainLoop(particlesLeft, particlesRight, translation) {
 		}
 	});
 
-	$('#tempLeft').html(average(leftTemps));
+	$('#tempLeft').html(Math.round(average(leftTemps)));
 
 	particlesRight.forEach(function (particle, i) {
 		rightTemps.push(particle.vel.r);
@@ -49,7 +49,7 @@ function mainLoop(particlesLeft, particlesRight, translation) {
 		}
 	});
 
-	$('#tempRight').html(average(rightTemps));
+	$('#tempRight').html(Math.round(average(rightTemps)));
 	
 	if(!allowCrossOver){
 		c.beginPath()
diff --git a/JS/Start.js b/JS/Start.js
@@ -137,6 +137,7 @@ function printInputs() {
 
 		settingContainer.append(varName + ': ');
 		settingContainer.append(settingInput);
+		settingContainer.append('<p></p>');
 		var initValue = window[varName];
 		if (settingInput.attr('type') == 'checkbox') {
 			settingInput.attr('checked', initValue);
@@ -145,6 +146,10 @@ function printInputs() {
 		}
 
 	});
+	$('[type="range"]').change(function(e){
+		let target = $(this);
+		target.parent().children('p').html(target.val())
+	});
 }
 
 function refreshSize() {
diff --git a/index.html b/index.html
@@ -20,6 +20,9 @@
             #settings{
                 display: inline-block;
             }
+			p{
+				display: inline;
+			}
         </style>
     </head>
     <body>
@@ -32,8 +35,8 @@
 			<span class='setting' type='color' var='barrierColor'></span><br/>
             <span class='setting' type='checkbox' var='allowCrossOver'></span><br/>
 			<hr/>
-			<span class='setting' type='range' var='initTempLeft' max='30' min='5'></span><br/>
-			<span class='setting' type='range' var='initTempRight' max='30' min='5'></span><br/>
+			<span class='setting' type='range' var='initTempLeft' max='30' min='1'></span><br/>
+			<span class='setting' type='range' var='initTempRight' max='30' min='1'></span><br/>
 			<span class='setting' type='range' var='numberOfParticlesLeft' max='200' min='50'></span><br/>
 			<span class='setting' type='range' var='numberOfParticlesRight' max='200' min='50'></span><br/>
 			<button onclick="resetLoop()">Reset</button>

Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@ function mainLoop(particlesLeft, particlesRight, translation) {`
`30`	`30`	`}`
`31`	`31`	`});`
`32`	`32`
`33`		`- $('#tempLeft').html(average(leftTemps));`
	`33`	`+ $('#tempLeft').html(Math.round(average(leftTemps)));`
`34`	`34`
`35`	`35`	`particlesRight.forEach(function (particle, i) {`
`36`	`36`	`rightTemps.push(particle.vel.r);`
`@@ -49,7 +49,7 @@ function mainLoop(particlesLeft, particlesRight, translation) {`
`49`	`49`	`}`
`50`	`50`	`});`
`51`	`51`
`52`		`- $('#tempRight').html(average(rightTemps));`
	`52`	`+ $('#tempRight').html(Math.round(average(rightTemps)));`
`53`	`53`
`54`	`54`	`if(!allowCrossOver){`
`55`	`55`	`c.beginPath()`