4 files changed, 43 insertions, 0 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 57285704..9ae5d3d5 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -216,7 +216,9 @@ POSSIBILITY OF SUCH DAMAGE.
                         </div>
 
                         <div data-montage-id="timeline_gutter" class="timelinegutter">
+                            <div class="sliderClass">
                             <div data-montage-id="tl_slider" class="tl_slider"></div>
+                            </div>
                             <input data-montage-id="end_hottext" class="endhottext">
                         </div>
                     </div>
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index aafc3d1d..981ddc22 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -505,11 +505,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     },
     millisecondsOffset:{
         get:function () {
+
             return this._millisecondsOffset;
     },
         set:function (newVal) {
             if (newVal !== this._millisecondsOffset) {
 
+                this.tempValue  = newVal;
                 var tempValue = (1/newVal) * 1000000;
                 newVal = tempValue;
 
@@ -1695,6 +1697,22 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         }
     },
 
+    zoomTrackContainerWidthChange:{
+        value:function () {
+
+            this.tempValue = this.tempValue/1000;
+            this.tempValue *= 30;
+
+            this.container_tracks.style.width = (this.tempValue * 80) + "px";
+            this.master_track.style.width = (this.tempValue * 80) + "px";
+            this.time_markers.style.width = (this.tempValue * 80) + "px";
+            if (this.timeMarkerHolder) {
+                this.time_markers.removeChild(this.timeMarkerHolder);
+            }
+            this.drawTimeMarkers();
+        }
+    },
+
     handleLayerScroll: {
         value:function () {
                 this._areTracksScrolling = true;
diff --git a/js/panels/Timeline/TimelinePanel.reel/images/knob.png b/js/panels/Timeline/TimelinePanel.reel/images/knob.png
new file mode 100755
index 00000000..ecfbfcec
--- /dev/null
+++ b/js/panels/Timeline/TimelinePanel.reel/images/knob.png
diff --git a/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss b/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss
index 4fbcc400..d3529444 100644
--- a/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss
+++ b/js/panels/Timeline/TimelinePanel.reel/scss/TimelinePanel.scss
@@ -396,3 +396,26 @@ POSSIBILITY OF SUCH DAMAGE.
 .layer-hidden {
         display: none;
 }
+
+.tl_slider {
+    width: 127px;
+    height:5px;
+    float: left;
+    clear: none;
+    margin: 2px 0px 0px 0px;
+}
+
+.slider-track {
+    background: #29292;
+    width: 127px
+},
+
+.sliderClass {
+    float: left;
+    width: 127px
+}
+
+.sliderClass .knob {
+    background: url(../images/knob.png) no-repeat transparent center center;
+    margin-bottom: 2px;
+}