From 4f7e25eeb92d4d61543b54b003cca33f7e6a4664 Mon Sep 17 00:00:00 2001
From: ansuz <ansuz@transitiontech.ca>
Date: Mon, 3 Apr 2017 10:43:57 +0200
Subject: [PATCH] show labels for brush width

---
 www/whiteboard/index.html | 2 +-
 www/whiteboard/main.js    | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/www/whiteboard/index.html b/www/whiteboard/index.html
index d48d84bda..ac38d6ec9 100644
--- a/www/whiteboard/index.html
+++ b/www/whiteboard/index.html
@@ -75,7 +75,7 @@
 
     <div id="controls">
         <button id="clear">Clear</button>
-        <input id="width" type="number" value="5"></input>
+        <input id="width" type="range" value="5" min="1" max="100"></input><label for="width">5</label>
         <div id="colors">&nbsp;</div>
     </div>
 
diff --git a/www/whiteboard/main.js b/www/whiteboard/main.js
index 697a01798..745558046 100644
--- a/www/whiteboard/main.js
+++ b/www/whiteboard/main.js
@@ -45,8 +45,11 @@ define([
         var $canvasContainer = $('canvas').parents('.canvas-container');
 
         var $width = $('#width');
+        var $widthLabel = $('label[for="width"]');
         var updateBrushWidth = function () {
-            canvas.freeDrawingBrush.width = Number($width.val());
+            var val = $width.val();
+            canvas.freeDrawingBrush.width = Number(val);
+            $widthLabel.text(val);
         };
         updateBrushWidth();