1 files changed, 91 insertions, 68 deletions

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;
-            
-                        
         }
     },
 
     prepareForDraw: {
         value: function() {
-            this.minX = this.sliderLeft = this.element.offsetLeft;
-            this.sliderWidth =  (this.width || RangeInput.DEFAULT_WIDTH); //this.element.offsetWidth || 300;            
-            this.element.style.width = (this.sliderWidth + RangeInput.HANDLE_ADJUST) + 'px';
-            
-            this.maxX = this.sliderLeft + this.sliderWidth;
-            
+            this._sliderLeft = this.element.offsetLeft;
+            this._sliderWidth =  (this.width || RangeInput.DEFAULT_WIDTH); //this.element.offsetWidth || 300;
+            this.element.style.width = (this._sliderWidth + RangeInput.HANDLE_ADJUST) + 'px';
+
             if(!this._valueSyncedWithPosition) {
                 this._calculatePositionFromValue();
             }
         }
     },
 
-    // @todo: Without prepareForActivationEvents, the translateComposer does not work
+    // @todo: Without prepareForActivationEvents, the _translateComposer does not work
     prepareForActivationEvents: {
         value: function() {
-            this.translateComposer.addEventListener('translateStart', this, false);
-            this.translateComposer.addEventListener('translateEnd', this, false);
+            this._translateComposer.addEventListener('translateStart', this, false);
+            this._translateComposer.addEventListener('translateEnd', this, false);
+
+            this._addEventListeners();
+
+        }
+    },
+
+    _addEventListeners: {
+        value: function() {
+            if(window.Touch) {
+                this.element.addEventListener('touchend', this, false);
+            } else {
+                this.element.addEventListener('mouseup', this, false);
+            }
         }