Mulit-line with Slide, Defs and Sibling Selector

<html>
<head>
    <style>
      .track,
      .track-inset,
      .track-overlay {
        stroke-linecap: round;
      }
      .track {
        stroke: #000;
        stroke-opacity: 0.3;
        stroke-width: 10px;
      }
      .track-inset {
        stroke: #dcdcdc;
        stroke-width: 8px;
      }
      .track-overlay {
        pointer-events: stroke;
        stroke-width: 50px;
        stroke: transparent;
        cursor: crosshair;
      }
      .handle {
        fill: #fff;
        stroke: #000;
        stroke-opacity: 0.5;
        stroke-width: 1.25px;
      }
      g:hover > .line{
        opacity: 1;
      }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans:700|Roboto">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.js"></script>
</head>
<body>
    <div class="container">
        <h2>Shifting Tides of Life Expectancy from 1960 to 2015</h2>
        <div class="slider"></div>
        <div class="lineChart"></div>
        <footer class="u-pull-right"><a href="https://data.world/makeovermonday/life-expectancy-at-birth-by-country">Life Expectancy at Birth</a></footer>
    </div>
</body>
<script src='chart.js'></script>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.js