2 files changed, 99 insertions, 78 deletions

diff --git a/node_modules/montage/ui/skeleton/range-input.reel/range-input.html b/node_modules/montage/ui/skeleton/range-input.reel/range-input.html
index 4fa2d3db..8e1a8d22 100644
--- a/node_modules/montage/ui/skeleton/range-input.reel/range-input.html
+++ b/node_modules/montage/ui/skeleton/range-input.reel/range-input.html
@@ -12,27 +12,25 @@
         <script type="text/montage-serialization">
 {
     "translateComposer1": {
-        "module": "montage/ui/composer/translate-composer",
-        "name": "TranslateComposer",
+        "prototype": "montage/ui/composer/translate-composer",
         "properties": {
             "component": {"@": "owner"},
             "axis": "horizontal",
             "hasBouncing": false,
-            "hasMomentum": false
+            "hasMomentum": false,
+            "minTranslateX": 0
         },
         "bindings": {
-            "maxTranslateX": {"<-": "@owner.sliderWidth"},
-            "translateX": {"<<->": "@owner.positionX"}            
+            "maxTranslateX": {"<-": "@owner._sliderWidth"},
+            "translateX": {"<<->": "@owner._positionX"}
         }
     },
     "owner": {
-        "module": "montage/ui/skeleton/range-input.reel",
-        "name": "RangeInput",
+        "prototype": "montage/ui/skeleton/range-input.reel",
         "properties": {
             "element": {"#": "slider"},
-            "sliderEl": {"#": "slider"},
-            "handleEl": {"#": "slider-handle"},
-            "translateComposer": {"@": "translateComposer1"}
+            "_handleEl": {"#": "slider-handle"},
+            "_translateComposer": {"@": "translateComposer1"}
         }
 
     }
diff --git a/node_modules/montage/ui/skeleton/range-input.reel/range-input.js b/node_modules/montage/ui/skeleton/range-input.reel/range-input.js
index 5747ccd6..bb14ffc9 100644
--- a/node_modules/montage/ui/skeleton/range-input.reel/range-input.js
+++ b/node_modules/montage/ui/skeleton/range-input.reel/range-input.js
@@ -5,13 +5,13 @@
  </copyright> */
 /*global require,exports */
 var Montage = require("montage").Montage,
-    Component = require("ui/component").Component;    
+    Component = require("ui/component").Component;
 
 /**
  * The input type="range" field
  */
 var RangeInput = exports.RangeInput = Montage.create(Component, {
-    
+
     DEFAULT_WIDTH: {value: 300},
     HANDLE_ADJUST: {value: 5},
 
@@ -50,7 +50,7 @@ var RangeInput = exports.RangeInput = Montage.create(Component, {
            this.needsDraw = true;
        }
    },
-   
+
    /** Width of the slider in px. Default = 300 */
    _width: {value: null},
    width: {
@@ -62,11 +62,9 @@ var RangeInput = exports.RangeInput = Montage.create(Component, {
              this.needsDraw = true;
          }
      },
-   
 
-   _sliding: {value: false},
-   
    percent: {value: null},
+
    _valueSyncedWithPosition: {value: null},
    _value: {value: null},
     value: {
@@ -87,120 +85,145 @@ var RangeInput = exports.RangeInput = Montage.create(Component, {
    },
 
     // private
-    sliderEl: {value: null, enumerable: false},
-    handleEl: {value: null, enumerable: false},
-    sliderLeft: {value: null, enumerable: false},
-    sliderWidth: {value: null, enumerable: false},
-    minX: {value: null, enumerable: false},
-    maxX: {value: null, enumerable: false},
-
-    _positionX: {value: null},
-    positionX: {
+    _handleEl: {value: null, enumerable: false},
+    _sliderLeft: {value: null, enumerable: false},
+    _sliderWidth: {value: null, enumerable: false},
+
+
+    __positionX: {value: null},
+    _positionX: {
         enumerable: false,
         get: function() {
-            return this._positionX;
+            return this.__positionX;
         },
         set: function(value, fromValue) {
-            
+
             if(value !== null && !isNaN(value)) {
-                this._positionX = value;
+                this.__positionX = value;
                 if(!fromValue) {
                     this._calculateValueFromPosition();
                     this._valueSyncedWithPosition = true;
-                }  
-                this.needsDraw = true;                
+                }
+                this.needsDraw = true;
             }
-           
+
         }
     },
 
     _calculateValueFromPosition: {
         value: function() {
-            if(this.sliderWidth > 0) {
-                var percent = this.percent = (this.positionX / this.sliderWidth) * 100;
-                var value = (this.min + ((percent/100) * (this.max - this.min)));               
-                Object.getPropertyDescriptor(this, "value").set.call(this, value, true);    
+            if(this._sliderWidth > 0) {
+                var percent = this.percent = (this._positionX / this._sliderWidth) * 100;
+                var value = (this.min + ((percent/100) * (this.max - this.min)));
+                Object.getPropertyDescriptor(this, "value").set.call(this, value, true);
             }
 
         }
     },
-    
+
     _calculatePositionFromValue: {
         value: function() {
             // unless the element is ready, we cannot position the handle
-            if(this.sliderWidth) {
+            if(this._sliderWidth) {
                 var percent, value = this.value;
                 var range = (this.max - this.min);
-                percent = ((this.value-this.min)/range) * 100;                                    
-                var positionX = (percent/100)*this.sliderWidth;
-                Object.getPropertyDescriptor(this, "positionX").set.call(this, positionX, true);   
+                percent = ((this.value-this.min)/range) * 100;
+                var positionX = (percent/100)*this._sliderWidth;
+                Object.getPropertyDescriptor(this, "_positionX").set.call(this, positionX, true);
+
                 this.percent = percent;
-                this._valueSyncedWithPosition = true;             
+                this._valueSyncedWithPosition = true;
             } else {
                 this._valueSyncedWithPosition = false;
-            }            
+            }
         }
     },
 
     deserializedFromTemplate: {
         value: function() {
-            
-            // read initial values from the input type=range                      
-            
+            // read initial values from the input type=range
             this.min = this.min || this.element.getAttribute('min') || 0;
-            this.max = this.max || this.element.getAttribute('max') || 100;            
+            this.max = this.max || this.element.getAttribute('max') || 100;
             this.step = this.step || this.element.getAttribute('step') || 1;
             this.value = this.value || this.element.getAttribute('value') || 0;
-            
-                        
         }
     },