diff --git a/extension/app/components/Slider.jsx b/extension/app/components/Slider.jsx
index 15c37e9a8..cdb4c5cb2 100644
--- a/extension/app/components/Slider.jsx
+++ b/extension/app/components/Slider.jsx
@@ -7,8 +7,10 @@ import 'rc-tooltip/assets/bootstrap.css';
 
 const Handle  = Slider.Handle;
 
+
 const handle = (props) => {
     const { value, dragging, index, ...restProps } = props;
+
     return (
       <Tooltip
         prefixCls="rc-slider-tooltip"
@@ -26,9 +28,22 @@ class mainSlider extends Component {
     constructor(props){
         super(props)
     }
+
+
     render(){
         return(
-        <Slider min={0} max={20} defaultValue={3} handle={handle} />
+            <div>
+                <Slider 
+                min={0} 
+                max={this.props.snapshotLength-1} 
+                value = {this.props.snapshotIndex}
+                onChange={(index) => {
+                    this.props.handleChangeSnapshot(index)
+                }}
+                handle={handle}
+                 >
+                </Slider>
+            </div>
         )
     }
 }
diff --git a/extension/app/containers/MainContainer.jsx b/extension/app/containers/MainContainer.jsx
index 2ff1ca81e..ab578a950 100644
--- a/extension/app/containers/MainContainer.jsx
+++ b/extension/app/containers/MainContainer.jsx
@@ -8,7 +8,7 @@ class MainContainer extends Component {
   constructor() {
     super();
     this.state = {
-      snapshots: [{ state: 'snapshot1' }, { state: 'snapshot2' }, { state: 'snapshot3' }],
+      snapshots: [{ state: 'snapshot1' , state2: 'othercomp snapshot1'}, { state: 'snapshot2' }, { state: 'snapshot3' }],
       snapshotIndex: 0,
     };
 
@@ -51,7 +51,11 @@ class MainContainer extends Component {
           />
           <StateContainer snapshot={snapshots[snapshotIndex]} />
         </div>
-        <TravelContainer />
+        <TravelContainer
+          snapshotsLength = {snapshots.length}
+          handleChangeSnapshot = {this.handleChangeSnapshot}
+          snapshotIndex = {snapshotIndex}
+        />
       </div>
     );
   }
diff --git a/extension/app/containers/TravelContainer.jsx b/extension/app/containers/TravelContainer.jsx
index 701882a66..bd39b589f 100644
--- a/extension/app/containers/TravelContainer.jsx
+++ b/extension/app/containers/TravelContainer.jsx
@@ -5,15 +5,21 @@ import Slider from '../components/Slider'
 
 
 class TravelContainer extends Component {
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
   }
 
   render() {
     return (
       <div>
       <div className="travel-container">TravelContainer</div>
-      <Slider/>
+      <Slider 
+        className="travel-slider" 
+        snapshotLength = {this.props.snapshotsLength} 
+        handleChangeSnapshot = {this.props.handleChangeSnapshot}
+        snapshotIndex = {this.props.snapshotIndex}
+      />
+      {`snapshot inex in slider ${this.props.snapshotIndex}`}
       </div>
     )
 
diff --git a/extension/app/styles/styles.css b/extension/app/styles/styles.css
index 0c725ec43..8a69e150e 100644
--- a/extension/app/styles/styles.css
+++ b/extension/app/styles/styles.css
@@ -40,6 +40,10 @@
   height: 10%;
 }
 
+.travel-slider {
+  width: 50%;
+}
+
 .head-container,
 .body-container,
 .action-container,