GUI: Added min/max to material's opacity.

gui/js/UI.js

@@ -337,6 +337,9 @@ UI.FloatNumber = function ( position ) {
 	this.dom.style.fontSize = '12px';
 	this.dom.style.textDecoration = 'underline';
 
+	this.min = - Infinity;
+	this.max = Infinity;
+
 	this.onChangeCallback = null;
 
 	var scope = this;
@@ -357,10 +360,12 @@ UI.FloatNumber = function ( position ) {
 
 	var onMouseMove = function ( event ) {
 
-		var dx = event.screenX - onMouseDownScreenX;
-		var dy = event.screenY - onMouseDownScreenY;
+		var distance = ( event.screenX - onMouseDownScreenX ) - ( event.screenY - onMouseDownScreenY );
+		var amount = event.shiftKey ? 10 : 100;
+
+		var number = onMouseDownValue + ( distance / amount );
 
-		scope.dom.textContent = ( onMouseDownValue + ( dx - dy ) / ( event.shiftKey ? 10 : 100 ) ).toFixed( 2 );
+		scope.dom.textContent = Math.min( scope.max, Math.max( scope.min, number ) ).toFixed( 2 );
 		scope.onChangeCallback();
 
 	}
@@ -394,6 +399,20 @@ UI.FloatNumber.prototype.setValue = function ( value ) {
 
 };
 
+UI.FloatNumber.prototype.setMin = function ( value ) {
+
+	this.min = value;
+	return this;
+
+};
+
+UI.FloatNumber.prototype.setMax = function ( value ) {
+
+	this.max = value;
+	return this;
+
+};
+
 UI.FloatNumber.prototype.onChange = function ( callback ) {
 
 	this.onChangeCallback = callback;

gui/js/ui/Sidebar.Properties.Material.js

@@ -27,7 +27,9 @@ Sidebar.Properties.Material = function ( signals ) {
 	container.add( new UI.HorizontalRule() );
 
 	container.add( new UI.Text().setText( 'Opacity' ).setColor( '#666' ) );
-	var materialOpacity = new UI.FloatNumber( 'absolute' ).setLeft( '90px' ).setFontSize( '12px' ).onChange( update );
+	var materialOpacity = new UI.FloatNumber( 'absolute' ).setLeft( '90px' ).setFontSize( '12px' );
+	materialOpacity.setMin( 0 ).setMax( 1 );
+	materialOpacity.onChange( update );
 	container.add( materialOpacity );
 	container.add( new UI.HorizontalRule() );