title: timeline progress bar with sliders
body: <p>I have a timeline like this. But if there are a lot of points, it does not look very nice. How can I add functionality like a slider? To be displayed (only the first 5 years) and the rest to appear after the transition between years.</p>
  <p>How can i do this? Or maybe there are some libraries with such functionality.
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function initProgress() {
    var activeDist = $(".slide a.active").position();
    activeDist = activeDist.left;
    $(".after").stop().animate({
      width: activeDist + "px"
    });
  }
  initProgress();
  $("a").click(function(e) {
    e.preventDefault();
    $(".slide a").removeClass("active");
    $(this).addClass("active");
    initProgress();
  });
  $(window).resize(function() {
    initProgress();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: royalblue;
    margin: 0;
    padding: 0;
  }
  
  .container {
    position: relative;
  }
  
  .container .before,
  .container .after {
    z-index: -1;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    margin-top: -3px;
    height: 4px;
    background: cornflowerblue;
  }
  
  .container .after {
    width: 50%;
    background: white;
  }
  .container:before,
  .container:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    bottom: 0;
    margin-top: -3px;
    width: 44px;
    height: 4px;
    background-color: green;
  }
  
  .container:before {
    left: 0;
    background: white;
    background: linear-gradient(90deg, royalblue 0%, white 100%, white 100%);
  }
  
  .container:after {
    right: 0;
    background: linear-gradient(270deg, royalblue 0%, cornflowerblue 100%, cornflowerblue 0%);
  }
  
  .timeline {
    display: table;
    table-layout: fixed;
    margin-top: 60px;
    width: 100%;
  }
  
  .time {
    display: table-cell;
    text-align: center;
  }
  
  .slide a {
    display: inline-block;
    position: relative;
    width: 10px;
    height: 10px;
    border: 2px solid white;
    border-radius: 100%;
    background: royalblue;
    color: white;
    transition: 0.3s all ease;
  }
  
  .slide a.active,
  .slide a:hover {
    border-color: white;
    background: white;
  }
  
  a.deactive {
    border: none;
    width: 0px;
  }
  
  .slide i {
    display: block;
    position: absolute;
    top: -40px;
    left: -12px;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    line-height: 30px;
    color: white;
    font-style: normal;
    font-size: 11px;
  }
  
  .slide span {
    display: none;
    opacity: 0;
    display: block;
    position: fixed;
    top: 150px;
    left: 0;
    right: 0;
    color: white;
  }
  
  a.active&gt;i {
    transform:scale(5);
  }
  
  a.active~span {
    display: block;
    opacity: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="container"&gt;
    &lt;div class="before"&gt;&lt;/div&gt;
    &lt;div class="after"&gt;&lt;/div&gt;
    &lt;div class="container__track timeline"&gt;
      &lt;div class="slide time"&gt;
        &lt;a class="" href=""&gt;&lt;i&gt;1979&lt;/i&gt;&lt;/a&gt;&lt;span&gt; 1979 &lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="slide time"&gt;
        &lt;a class="active" href=""&gt;&lt;i&gt;1980&lt;/i&gt;&lt;/a&gt;&lt;span&gt; 1980 &lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="slide time"&gt;
        &lt;a href=""&gt;&lt;i&gt;1981&lt;/i&gt;&lt;/a&gt;&lt;span&gt; 1981 &lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="slide time"&gt;
        &lt;a href=""&gt;&lt;i&gt;1983&lt;/i&gt;&lt;/a&gt;&lt;span&gt; 1983 &lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="slide time"&gt;
        &lt;a href=""&gt;&lt;i&gt;1984&lt;/i&gt;&lt;/a&gt;&lt;span&gt; 1984 &lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>