3 files changed, 113 insertions, 72 deletions

diff --git a/node_modules/montage/ui/skeleton/range-input.reel/range-input.css b/node_modules/montage/ui/skeleton/range-input.reel/range-input.css
index 07e6031e..43bf5b2c 100644
--- a/node_modules/montage/ui/skeleton/range-input.reel/range-input.css
+++ b/node_modules/montage/ui/skeleton/range-input.reel/range-input.css
@@ -2,7 +2,7 @@
    display: inline-block;
    border-radius: 4px;
    position: relative;
-   height: 5px;
+   height: 8px;
    background-color: #556270; 
    border: 1px solid #aaa;
    cursor: default;
@@ -17,9 +17,9 @@
     height: 1.2em;
     background-color: #ddd;
     color: #fff;
-    padding: 2px;
+    padding: 4px;
     border: 1px solid #333;
-    border-radius: 10px;
+    border-radius: 20px;
 }
 
 .slider-handle:hover {
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 8e1a8d22..927c49d1 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,21 +12,19 @@
         <script type="text/montage-serialization">
 {
     "translateComposer1": {
-        "prototype": "montage/ui/composer/translate-composer",
+        "prototype": "ui/composer/translate-composer",
         "properties": {
             "component": {"@": "owner"},
             "axis": "horizontal",
-            "hasBouncing": false,
             "hasMomentum": false,
             "minTranslateX": 0
         },
         "bindings": {
             "maxTranslateX": {"<-": "@owner._sliderWidth"},
-            "translateX": {"<<->": "@owner._positionX"}
+            "translateX": {"<->": "@owner._positionX"}
         }
     },
     "owner": {
-        "prototype": "montage/ui/skeleton/range-input.reel",
         "properties": {
             "element": {"#": "slider"},
             "_handleEl": {"#": "slider-handle"},
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 bb14ffc9..1dbd4272 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
@@ -12,13 +12,19 @@ var Montage = require("montage").Montage,
  */
 var RangeInput = exports.RangeInput = Montage.create(Component, {
 
-    DEFAULT_WIDTH: {value: 300},
-    HANDLE_ADJUST: {value: 5},
+    DEFAULT_WIDTH: {
+        value: 300
+    },
 
-    hasTemplate: {value: true},
+    HANDLE_ADJUST: {
+        value: 5
+    },
 
     // public API
-    _min: {value: null},
+    _min: {
+        value: null
+    },
+
     min: {
         get: function() {
             return this._min;
@@ -26,73 +32,110 @@ var RangeInput = exports.RangeInput = Montage.create(Component, {
         set: function(value) {
             this._min =  String.isString(value) ? parseFloat(value) : value;
             this.needsDraw = true;
-        }
+        },
+        serializable: true
+    },
+
+    _max: {
+        value: null
     },
 
-    _max: {value: null},
     max: {
-       get: function() {
-           return this._max;
-       },
-       set: function(value) {
-           this._max = String.isString(value) ? parseFloat(value) : value;
-           this.needsDraw = true;
-       }
+        get: function() {
+            return this._max;
+        },
+        set: function(value) {
+            this._max = String.isString(value) ? parseFloat(value) : value;
+            this.needsDraw = true;
+        },
+        serializable: true
    },
 
-    _step: {value: null},
+    _step: {
+        value: null
+    },
+
     step: {
-       get: function() {
-           return this._step;
-       },
-       set: function(value) {
-           this._step =  String.isString(value) ? parseFloat(value) : value;
-           this.needsDraw = true;
-       }
-   },
+        get: function() {
+            return this._step;
+        },
+        set: function(value) {
+            this._step =  String.isString(value) ? parseFloat(value) : value;
+            this.needsDraw = true;
+        },
+        serializable: true
+    },
+
+    /** Width of the slider in px. Default = 300 */
+    _width: {
+        value: null
+    },
+
+    width: {
+        get: function() {
+            return this._width;
+        },
+        set: function(value) {
+            this._width =  String.isString(value) ? parseFloat(value) : value;
+            this.needsDraw = true;
+        },
+        serializable: true
+    },
+
+    percent: {
+        value: null
+    },
+
+    _valueSyncedWithPosition: {
+        value: null
+    },
+
+    _value: {
+        value: null
+    },
 
-   /** Width of the slider in px. Default = 300 */
-   _width: {value: null},
-   width: {
-         get: function() {
-             return this._width;
-         },
-         set: function(value) {
-             this._width =  String.isString(value) ? parseFloat(value) : value;
-             this.needsDraw = true;
-         }
-     },
-
-   percent: {value: null},
-
-   _valueSyncedWithPosition: {value: null},
-   _value: {value: null},
     value: {
-       get: function() {
-           return this._value;
-       },
-       set: function(value, fromInput) {
-           this._value =  String.isString(value) ? parseFloat(value) : value;
-
-           if(fromInput) {
-               this._valueSyncedWithPosition = true;
-           } else {
-               this._valueSyncedWithPosition = false;
-               this._calculatePositionFromValue();
-               this.needsDraw = true;
-           }
+        get: function() {
+            return this._value;
+        },
+        set: function(value, fromInput) {
+            this._value =  String.isString(value) ? parseFloat(value) : value;
+
+            if(fromInput) {
+                this._valueSyncedWithPosition = true;
+            } else {
+                this._valueSyncedWithPosition = false;
+                this._calculatePositionFromValue();
+                this.needsDraw = true;
+            }