Add brush-size UI

public/index.html

@@ -79,6 +79,25 @@
                 <div id="rectangle"></div>
               </a>
             </div>
+            <div class="pen-body">
+              <div id="brush-colour">
+                <h3>Brush size</h3>
+              </div>
+              &nbsp;
+              <div class="slide-size">
+                <input
+                  type="range"
+                  min="1"
+                  max="100"
+                  value="50"
+                  class="slider"
+                  id="range"
+                />
+                <p style="text-align: center; margin: 0px">
+                  Size: <span id="value"></span>
+                </p>
+              </div>
+            </div>
           </div>
         </div>
         <div id="palette" class="properties" style="padding-top: 150px">

public/styles.css

@@ -357,6 +357,44 @@ button.selected {
   text-align: center;
 }
 
+.slide-size {
+  width: 90%;
+  height: 20%;
+}
+
+.slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 25px;
+  background: #d3d3d3;
+  outline: none;
+  opacity: 0.7;
+  -webkit-transition: 0.2s;
+  transition: opacity 0.2s;
+  margin-top: 30px;
+}
+
+.slider:hover {
+  opacity: 1;
+}
+
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 25px;
+  height: 25px;
+  background: #4f4f4f;
+  cursor: pointer;
+}
+
+.slider::-moz-range-thumb {
+  width: 25px;
+  height: 25px;
+  background: #4f4f4f;
+  cursor: pointer;
+}
+
 #others {
   margin-top: 2%;
   display: flex;
@@ -409,4 +447,4 @@ button.selected {
       format("truetype"),
     url("./assets/fonts/martel-v4-latin/martel-v4-latin-regular.svg#Martel")
       format("svg");
-}
+}
\ No newline at end of file

src/app.js

@@ -130,6 +130,12 @@ HTML.picker.addEventListener("change", () => {
   canvas.setStrokeColour(paletteColour)
 })
 
+HTML.output.innerHTML = HTML.slider.value
+
+HTML.slider.oninput = function() {
+  HTML.output.innerHTML = this.value
+}
+
 HTML.eraserButton.addEventListener("click", () => {
   currentTool = tools.ERASER
   HTML.penButton.classList.remove("selected")

src/elements.js

@@ -27,3 +27,5 @@ export const rectangle = document.getElementById("rectangle")
 export const wheel = document.getElementById("wheel")
 export const picker = document.getElementById("other-colours")
 export const labelColour = document.getElementById("colours")
+export const slider = document.getElementById("range")
+export const output = document.getElementById("value")