--- a/client/src/components/TimeSlider.vue	Thu Apr 02 16:12:24 2020 +0200
+++ b/client/src/components/TimeSlider.vue	Fri Apr 03 09:55:02 2020 +0200
@@ -237,6 +237,9 @@
         marginLeft = 0;
 
       d3.timeFormatDefaultLocale(localeDateString);
+      const toIsoDate = d => {
+        return d.toISOString();
+      };
       xScale = this.getScale();
       xAxis = this.getAxes();
       let svg = d3
@@ -252,31 +255,7 @@
         .extent([[0, 0], [(svgWidth, svgHeight)]])
         .on("zoom", this.zoomed);
 
-      svg
-        .append("g")
-        .attr("class", "axis--x")
-        .attr("transform", `translate(${marginLeft}, ${marginTop})`)
-        .call(xAxis);
-
-      // create rectanlge on the slider area to capture mouse events
-      const eventRect = svg
-        .append("rect")
-        .attr("id", "zoom")
-        .attr("class", "zoom")
-        .attr("width", svgWidth)
-        .attr("height", svgHeight)
-        .attr("fill", "white")
-        .attr("opacity", 0.2)
-        .on("mouseover", () => {
-          svg.select(".zoom").attr("cursor", "move");
-        });
-      eventRect.call(zoom).on("click", this.onClick);
-
-      const toIsoDate = d => {
-        return d.toISOString();
-      };
-
-      let drag = d3
+      const drag = d3
         .drag()
         .on("start", () => {
           d3.select(".line")
@@ -294,6 +273,33 @@
           );
         });
 
+      const main = svg
+        .append("g")
+        .attr("id", "zoom")
+        .attr("class", "zoom")
+        .attr("width", svgWidth)
+        .attr("height", svgHeight)
+        .on("mouseover", () => {
+          svg.select(".zoom").attr("cursor", "move");
+        });
+
+      main
+        .append("rect")
+        .attr("class", "main")
+        .attr("width", svgWidth)
+        .attr("height", svgHeight)
+        .attr("opacity", 0)
+        .on("mouseover", () => {
+          svg.select(".main").attr("cursor", "move");
+        });
+
+      main
+        .append("g")
+        .attr("class", "axis--x")
+        .attr("id", "zoom")
+        .attr("transform", `translate(${marginLeft}, ${marginTop})`)
+        .call(xAxis);
+
       svg
         .append("rect")
         .attr("class", "future")
@@ -305,7 +311,7 @@
         .attr("opacity", 0.3);
 
       // Create cursor to indicate to the selected time
-      svg
+      main
         .append("rect")
         .attr("class", "line")
         .attr("id", "scrubber")
@@ -320,6 +326,8 @@
           svg.select(".line").attr("cursor", "e-resize");
         })
         .call(drag);
+
+      main.call(zoom).on("click", this.onClick);
     },
     getScale() {
       return d3