Style changes for the sliders.

controller.number.js

@@ -9,6 +9,7 @@ var NumberController = function() {
     var _this = this;
     
     var isClicked = false;
+    var isDragged = false;
     var y, py, initialValue, inc;
     
     py = y = 0;
@@ -25,9 +26,20 @@ var NumberController = function() {
     var button = document.createElement('input');
     button.setAttribute('id', this.propertyName);
     button.setAttribute('type', this.type);
-    button.setAttribute('value', inc)
+    button.setAttribute('value', inc);
     this.domElement.appendChild(button);
     
+    var slider = document.createElement('input');
+    slider.setAttribute('id', this.propertyName + "-slider");
+    slider.setAttribute('type', 'range');
+    slider.setAttribute('value', inc);
+    if(min != null && max != null) {
+        slider.setAttribute('min', min);
+        slider.setAttribute('max', max);
+    }
+    slider.setAttribute('step', amt);
+    this.domElement.appendChild(slider);
+    
     button.addEventListener('mousedown', function(e) {
         isClicked = true;
     }, false);
@@ -38,13 +50,16 @@ var NumberController = function() {
         } else {
             inc = val;
         }
-        this.value = inc;
+        updateValue(inc);
-        _this.setValue(inc);
+    }, false);
+    slider.addEventListener('mousedown', function(e) {
+        isDragged = true;
     }, false);
     document.addEventListener('mouseup', function(e) {
         isClicked = false;
       	_this.makeSelectable(GUI.domElement); 
 		_this.makeSelectable(button);
+        isDragged = false;
     }, false);
     document.addEventListener('mousemove', function(e) {
         if(isClicked) {
@@ -67,16 +82,22 @@ var NumberController = function() {
                 else
                     inc--;
             }
-            button.value = inc;
+        } else if(isDragged) {
-            _this.setValue(inc);
+            if(inc != slider.value) inc = slider.value;
-        return false;
         }
+        updateValue(inc);
     }, false);
     
+    function updateValue(val) {
+        if(inc != val) inc = val;
+        button.value = val;
+        slider.value = val;
+        _this.setValue(val);
+    }
+    
     this.__defineSetter__("position", function(val) {
         inc = val;
-        button.value = inc;
+        updateValue(val);
-        _this.setValue(inc);
         // possibly push to an array here so that
         // we have a record of "defined" / "presets"
         // ????
@@ -85,4 +106,3 @@ var NumberController = function() {
 
 NumberController.prototype = new Controller();
 NumberController.prototype.constructor = NumberController;
-

controller.string.js

@@ -21,13 +21,6 @@ var StringController = function() {
         _this.setValue(input.value);
     }, false);
     
-    input.addEventListener('blur', function(e) {
-        if(_this.getValue() == '') {
-            _this.setValue(initialValue);
-            this.value = initialValue;
-        }
-    }, false);
-    
     this.domElement.appendChild(input);
 };
 StringController.prototype = new Controller();

gui.css

@@ -2,12 +2,12 @@
 	font: 9px Monaco, monospace;
 	color: #fff;
 	position: fixed;
-	width: 250px;
+	width: 320px;
 	z-index: 200;
 	opacity: 0.95;
 	top: 0;
 	left: 100%;
-	margin-left: -270px;
+	margin-left: -340px;
 	background-color: #fff;
 	-moz-transition: margin-top .2s ease-out;
 	-webkit-transition: margin-top .2s ease-out;
@@ -53,7 +53,6 @@
 .guidat-controller input { 
 	float: right;
 	outline: none;
-	clear: both;
 	border: 0;
 	padding: 2px;
 }
@@ -78,6 +77,11 @@
 }
 .guidat-controller.number input[type=number] {
 	width: 45px;
+	margin-left: 10px;
+}
+.guidat-controller.number input[type=slider] {
+	width: 45px;
+
 }
 
 .guidat-controller.boolean input {