Change behavior of slider and add slider label

index.html

@@ -11,8 +11,11 @@
 
 
     <div class="area">
-        <div class = "user-input">
+        <div class="user-input">
-            <input id = "gridSlider" type="range" min="1" max="100" value="16">
+            <div class="slider">
+                <label for="gridSlider">Grid Size: <span id="sliderLabel"></span></label>
+                <input name="gridSlider" id="gridSlider" type="range" min="1" max="100" value="16">
+            </div>
         </div>
         
         <div class="container">

script.js

@@ -1,15 +1,18 @@
-let numGrid = 16; //will use this later to prompt user
+
-//need to figure out the wrapping issue
 const container = document.querySelector(".container");
 const conWidth = container.clientWidth;
 const grid = document.createElement("div");
 const gridSlider = document.querySelector("#gridSlider");
+let numGrid = gridSlider.value;
+let sliderLabel = document.querySelector("#sliderLabel");
 
 
 function createGrid() {
     const gridArea = numGrid ** 2;
     const gridWidth = 100 / numGrid;
 
+    sliderLabel.textContent = numGrid
+
     grid.classList.add("grid");
     grid.style.width = gridWidth + '%';
     grid.style.height = gridWidth + '%';
@@ -24,7 +27,7 @@ function createGrid() {
         item.addEventListener("mouseover", colorGrid);
     });
 
-    gridSlider.addEventListener("change", getGridDimensions);
+    gridSlider.addEventListener("input", getGridDimensions);
 }
 
 
@@ -33,7 +36,6 @@ function getGridDimensions() {
     while (container.firstChild) {
         container.removeChild(container.lastChild);
     }
-    console.log(numGrid);
     createGrid();
 }
 

style.css

@@ -17,6 +17,19 @@ body{
     flex-wrap: wrap;
 }
 
+.user-input {
+    display: flex;
+    justify-content: center;
+    margin: 20px;
+}
+
+.slider {
+    display: flex;
+    flex-direction: column;
+    margin: 0 10px;
+    align-items: center;
+}
+
 .grid {
     border: 1px solid #bbb;
     box-sizing: border-box;