Making slider clickable.

This change enables you to click on the slider bar to move the slider.

2 files changed, 24 insertions, 0 deletions

diff --git a/web/scripts/growth.js b/web/scripts/growth.js
index d4cee5b..5f5b273 100644
--- a/web/scripts/growth.js
+++ b/web/scripts/growth.js
@@ -10,6 +10,16 @@ $(document).ready(function()
             $("#answerField").val(value);
         }
     });
+    $('.sliderbar').mousedown(function(e) {
+        var left = $(this).offset().left;
+        var width = $(this).width();
+        proposed = Math.max(left, Math.min(e.pageX - 23, left + width - 46));
+        $(this).children('.slider').offset({left: proposed});
+
+        var range = width - 46;
+        var value = (proposed - left) / range;
+        $("#answerField").val(value);
+    });
 
     $('.quad .selector').draggable({
         containment:"parent",
diff --git a/web/style.css b/web/style.css
index 548fea9..ecad037 100644
--- a/web/style.css
+++ b/web/style.css
@@ -32,6 +32,15 @@ blockquote {
     font-style: italic;
 }
 
+.noselect {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
 #notfooter {
     min-height: 100%;
     height: auto !important;
@@ -449,10 +458,15 @@ footer a:hover {
 
 .sliderbar {
     background: #E1E1E1;
+    height: 24px;
 }
 
 .sliderbar .slider {
     cursor: pointer;
+    background: url('/images/slider.png') no-repeat center center;
+    width: 46px;
+    height: 24px;
+    display: inline-block;
 }
 
 .quadQuestion {