Fixed constraints on slider and made fixes to css

controllers/controller.number.js

@@ -8,8 +8,9 @@ var NumberController = function() {
     var _this = this;
     
     // If we simply click and release a number field, we want to highlight it.
-    // This variable keeps track of whether or not we've draggedNumberField.
+    // This variable keeps track of whether or not we've dragged
     var draggedNumberField = false;
+    
     var clickedNumberField = false;
     
     var y = py = 0;
@@ -99,6 +100,8 @@ var NumberController = function() {
 		var dy = py - y;
 		var newVal = _this.getValue() + dy*step;	
 		_this.updateValue(newVal);
+		
+		console.log(newVal);
 		return false;
     }
     
@@ -106,9 +109,9 @@ var NumberController = function() {
 
 		val = parseFloat(val);
 		
-    	if (min && val <= min) {
+    	if (min != undefined && val <= min) {
     		val = min;
-    	} else if (max && val >= max) { 
+    	} else if (max != undefined && val >= max) { 
     		val = max;
     	}
         _this.setValue(val);

controllers/slider.js

@@ -13,15 +13,17 @@ var Slider = function(numberController, min, max, step, initValue) {
 	var x, px;
 	
 	this.domElement = document.createElement('div');
-	this.domElement.setAttribute('class', 'guidat-slider-bg');
-	
 	this.fg = document.createElement('div');
+	this.domElement.setAttribute('class', 'guidat-slider-bg');
 	this.fg.setAttribute('class', 'guidat-slider-fg');
 	
 	this.domElement.appendChild(this.fg);
 	
 	var map = function(v, i1, i2, o1, o2) {
-		return o1 + (o2 - o1) * ((v - i1) / (i2 - i1));
+		var v = o1 + (o2 - o1) * ((v - i1) / (i2 - i1));
+		if (v < o1) v = o1;
+		else if (v > o2) v = o2;
+		return v;
 	}
 	
 	var findPos = function(obj) {
@@ -53,11 +55,15 @@ var Slider = function(numberController, min, max, step, initValue) {
 	this.domElement.addEventListener('mousedown', function(e) {
 		clicked = true;
 		x = px = e.pageX;
+		_this.domElement.setAttribute('class', 'guidat-slider-bg active');
+		_this.fg.setAttribute('class', 'guidat-slider-fg active');
 		onDrag(e);
 	}, false);
 	
 	
-	this.domElement.addEventListener('mouseup', function(e) {
+	document.addEventListener('mouseup', function(e) {
+		_this.domElement.setAttribute('class', 'guidat-slider-bg');
+		_this.fg.setAttribute('class', 'guidat-slider-fg');
 		clicked = false;
 	}, false);
 	

demo.css

@@ -18,7 +18,6 @@ h1 {
     font-weight: 900; 
     text-transform: lowercase;
     line-height: 80px;
-    text-shadow: 2px 2px 2px #ccc;
     margin: 20px 0 20px 0;
 }
 

gui.css

@@ -1,12 +1,12 @@
 #guidat { 
 	color: #fff;
 	position: fixed;
-	width: 320px;
+	width: 280px;
 	z-index: 200;
 	opacity: 0.97;
 	top: 0;
 	left: 100%;
-	margin-left: -340px;
+	margin-left: -300px;
 	background-color: #fff;
 	-moz-transition: margin-top .2s ease-out;
 	-webkit-transition: margin-top .2s ease-out;
@@ -85,7 +85,7 @@
 	border: 0;
 	color: #1ed36f;
 	margin-right: 2px;
-width: 170px;
+width: 53%;
 }
 
 .guidat-controller.boolean { 
@@ -103,12 +103,9 @@ width: 170px;
 	color: #00aeff;
 }
 
-.guidat-controller.number input[type=slider] {
-	width: 50%;
-}
-
 #guidat .guidat-controller.boolean input { 
 	margin-top: 6px;
+	margin-right: 2px;
 	font-size: 20px;
 }
 
@@ -126,10 +123,20 @@ width: 170px;
 	display: inline-block;
 }
 
+
+.guidat-slider-bg:hover {
+background-color: #444;
+}
+
+.guidat-slider-bg:hover
+.guidat-slider-fg { 
+background-color: #52c8ff;
+}
+
 .guidat-slider-bg { 
 	background-color: #222;
 	cursor: ew-resize;
-	width: 130px;
+width: 40%;
 	margin-top: 2px;
 	float: right;
 	height: 21px;

index.html

@@ -20,7 +20,7 @@
                {   
                   numberProperty: 20,
                   constrainedNum: 0,
-                  notchedNum: 240,
+                  notchedNum: 200,
                   textProperty: "a string",
                   anotherTextProperty: "another string",
                   booleanProperty: false,
@@ -43,7 +43,7 @@
                GUI.add(controllableObject, "constrainedNum", -100, 100)
                
                // Creates a slider with notches
-               GUI.add(controllableObject, "notchedNum", 0, 800, 20)
+               GUI.add(controllableObject, "notchedNum", 0, 800, 100)
    
                // Creates a text field
                GUI.add(controllableObject, "textProperty");
@@ -89,7 +89,7 @@ window.onload = function() {
    GUI.add(controllableObject, "constrainedNum", -100, 100)
    
    // Creates a slider with notches
-   GUI.add(controllableObject, "notchedNum", 0, 800, 20)
+   GUI.add(controllableObject, "notchedNum", 0, 800, 100)
 
    // Creates a text field
    GUI.add(controllableObject, "textProperty");