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();