Adding new files

assets/src/scripts/monitoring-location/components/hydrograph/HydrographApp.vue

 <template>
-  <GraphBrush />
+  <div>
+    <CursorSlider />
+    <GraphBrush />
+  </div>
 </template>
 
 <script>
 import GraphBrush from './vue-components/graph-brush.vue';
+import CursorSlider from './vue-components/cursor-slider.vue';
 export default {
   name: 'HydrographApp',
   components: {
-    GraphBrush
+    GraphBrush,
+    CursorSlider
   }
 };
 </script>
\ No newline at end of file

assets/src/scripts/monitoring-location/components/hydrograph/vue-components/cursor-slider.vue

+<template>
+  <svg
+    class="cursor-slider-svg"
+    xmlns="http://www.w3.org/2000/svg"
+    :viewBox=viewBox
+  >
+    <g
+      class="cursor-slider-group"
+      ga-on="click"
+      ga-event-category="hydrograph-interaction"
+      ga-event-action="clickOnSlider"
+    >
+
+    </g>
+  </svg>
+</template>
+
+<script>
+import {useActions, useState} from 'redux-connect-vue';
+import {computed, inject, ref, watchEffect} from 'vue';
+
+import {sliderTop} from 'd3-simple-slider';
+import {createStructuredSelector} from 'reselect';
+
+import {getGraphCursorOffset} from 'ml/selectors/hydrograph-state-selector';
+
+import {setGraphCursorOffset} from 'ml/store/hydrograph-state';
+
+import {getMainXScale} from './selectors/scales';
+import {getMainLayout} from './selectors/layout';
+
+export default {
+name: 'CursorSlider',
+setup() {
+  const state = useState({
+    layout: getMainLayout,
+    xAxis: getBrushXAxis,
+    xScale: getMainXScale,
+    cursorOffset: getGraphCursorOffset
+  });
+
+  const viewBox = computed(() => {
+    return `0 0 ${state.layout.value.width + state.layout.value.margin.left + state.layout.value.margin.right} 25`;
+  });
+
+  return {
+    ...state,
+    viewBox
+  }
+}
+
+
+}
+</script>
\ No newline at end of file