Add pen size slider

1 files changed, 12 insertions, 1 deletions

diff --git a/views/partials/canvas.html b/views/partials/canvas.html
index 26899d7..c7b3e2a 100644
--- a/views/partials/canvas.html
+++ b/views/partials/canvas.html
@@ -4,7 +4,8 @@
 			<button type="button" id="redbtn">Red</button> <button type="button" id="bluebtn">Blue</button><br>
 			<button type="button" id="magentabtn">Magenta</button> <button type="button" id="cyanbtn">Cyan</button>
 			<button type="button" id="yellowbtn">Yellow</button> <button type="button" id="greenbtn">Green</button><br>
-			pen size : <input type="number" id="pensize" value="1" min="1" max="99"><br>
+			pen size : <input type="range" id="pensize-slider" value="1" min="1" max="99" style="vertical-align: middle;"> 
+			<input type="number" id="pensize" value="1" min="1" max="99" style="width: 50px;"><br>
 			<button type="button" id="undobtn">Undo</button> <button type="button" id="clearbtn">Clear</button><br>
 			<button type="button" id="sendbtn">Send</button>
 		</div>
@@ -153,6 +154,16 @@
 		ctx.lineWidth=pensize.value;
 		console.log(pensize.value)
 	});
+	pensize.addEventListener("input", () => {
+		pensizeSlider.value = pensize.value;
+		ctx.lineWidth = pensize.value;
+	});
+
+	const pensizeSlider = document.getElementById('pensize-slider');
+	pensizeSlider.addEventListener("input", () => {
+		pensize.value = pensizeSlider.value;
+		ctx.lineWidth = pensizeSlider.value;
+	});
 
 	// Keyboard shortcut for undo
 	document.addEventListener("keydown", function(event) {