updated h1 to be html5 and hooked to the gui

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;
@@ -106,9 +107,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);
 	

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;
@@ -51,6 +51,15 @@
 	background-color: #111;
 }
 
+.guidat-controller,
+.guidat-controller input,
+.guidat-slider-bg,
+.guidat-slider-fg { 
+	-moz-transition: background-color 0.15s linear;
+	-webkit-transition: background-color 0.15s linear;
+	transition: background-color 0.15s linear;
+}
+
 .guidat-controller.boolean:hover,
 .guidat-controller.function:hover {
 	background-color: #000;
@@ -85,7 +94,7 @@
 	border: 0;
 	color: #1ed36f;
 	margin-right: 2px;
-width: 170px;
+width: 53%;
 }
 
 .guidat-controller.boolean { 
@@ -103,10 +112,6 @@ width: 170px;
 	color: #00aeff;
 }
 
-.guidat-controller.number input[type=slider] {
-	width: 50%;
-}
-
 #guidat .guidat-controller.boolean input { 
 	margin-top: 6px;
 	margin-right: 2px;
@@ -127,10 +132,21 @@ width: 170px;
 	display: inline-block;
 }
 
+
+.guidat-slider-bg:hover,
+.guidat-slider-bg.active {
+background-color: #444;
+}
+
+.guidat-slider-bg:hover .guidat-slider-fg, 
+.guidat-slider-bg.active .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

@@ -45,7 +45,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, "pageTitle");
@@ -93,7 +93,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");