title: How to fix the slider to the markers in my five-step slider?
body: <p>I've done my best to append a CSS version of my wrapper but I am having a lot of trouble with the slider (2nd item in the flex box).</p>
  <p>This is a 5 step slider than I am trying to align to its 5 markers, denoted as the years 2017 through to 2021. However, the right hand side is going too far our of bounds each time, and does not line up with the markers themselves. I've tried my best to create a workable version, but this project was allocated to me with no notes and I'm struggling.</p>
  <p>My ideal outcome is to have a slider that fits on the markers that requires very little/no responsive design tweaks when moving across displays (1280px, 1920px eg). Just that when you select say, 2019 - the ui handle is actually on that point. Further, when you select 2021 the ui handle doesn't go out of bounds.</p>
  <p>The $year variable is read in from an options.inc file as range(2017, 2021) which appends the markers. But there is a disconnect between the slider and the markers.</p>
  <p>My solution, if I cannot find better, is to use classes to move the slider depending on the class (first/second/middle) and map that across. But as you can imagine, having CSS overlap JS gives a bit of an awkward animation that I am trying to avoid.</p>
  <p><a href="https://i.stack.imgur.com/Y0xDB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y0xDB.png" alt="This is how the slider should look - you can see marker:last is nowhere near its final location" /></a></p>
  <p><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($) {
    yearSlider: function() {
      var $el = $(".timeline-slider");
      this.year = +$el.find(".marker:last").text().trim();
      $el.slider({
        value: +$el.find(".marker:last").text().trim(), // last-slide class added assuming this condition
        min: +$el.find(".marker:first").text().trim(),
        max: +$el.find(".marker:last").text().trim(),
        step: 1,
        range: "min",
        animate: "fast",
        slide: function(event, ui) {
          petMapFilters.year = ui.value;
          petMap.map.fire("dragend");
          sliderPosition($(this), event, ui);
  
          if ($(".results-popup-opener").hasClass("active")) {
            petMapResultPopup.init();
          }
  
          if ($(".dma-popup").is(":visible")) {
            petMapDmaPopup.showLoader();
            petMapDmaPopup.init(petMapDmaPopup.targetData);
          }
        },
      });
  
  
  
      // Inelegant method.
      function sliderPosition(target, event, ui) {
        target.removeClass(" first-slide second-slide middle-slide fourth-slide last-slide");
        if (ui.value == $el.find(".marker:last").text().trim()) {
          target.addClass("last-slide");
        }
        if (ui.value == $el.find(".marker:nth-child(4)").text().trim()) {
          target.addClass("fourth-slide");
        }
        if (ui.value == $el.find(".marker:nth-child(3)").text().trim()) {
          target.addClass("middle-slide");
        }
        if (ui.value == $el.find(".marker:nth-child(2)").text().trim()) {
          target.addClass("second-slide");
        }
        if (ui.value == $el.find(".marker:first").text().trim()) {
          target.addClass("first-slide")
        }
      }
    }
  
  
  })(jQuery);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  legend,
  select {
    box-sizing: border-box;
  }
  
  select,
  textarea {
    border-radius: 0;
  }
  
  *,
  ::after,
  ::before {
    box-sizing: inherit;
  }
  
  body {
    margin: 0;
    padding: 0;
    background: #fff;
    font-family: Lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    font-weight: 400;
    line-height: 1.5;
    color: #000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  select {
    width: 100%;
  }
  
  .bottom-bar-wrapper .bottom-bar-inner a {
    color: inherit;
    font-size: 1.5625vw;
  }
  
  .bottom-bar-wrapper .bottom-bar-inner a.restart {
    color: #000;
    font-size: 0.75vw;
  }
  
  .bottom-bar-wrapper .bottom-bar-inner .fa {
    color: #fc3f31;
    font-size: 44px;
  }
  
  .bottom-bar-wrapper a.results-popup-opener.no-pointer {
    color: #fff;
  }
  
  .bottom-bar-inner {
    height: 100%;
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
  
  .nav-links,
  .timeline-slider {
    padding-right: 0.625rem;
    padding-left: 0.625rem;
    min-width: 0;
  }
  
  .timeline-slider {
    width: 100%;
    -webkit-flex: 1 1 0px;
    -ms-flex: 1 1 0px;
    flex: 1 1 0px;
    margin-left: 4.65vw;
    margin-right: 2vw;
  }
  
  .nav-links {
    -webkit-flex: 1 1 0px;
    -ms-flex: 1 1 0px;
    flex: 1 1 0px;
  }
  
  .nav-links a {
    padding: 0 1.5vw;
    height: 17vh;
    line-height: 1.25;
    background-color: transparent;
  }
  
  .nav-links a.active {
    background-color: #f1f2f2;
  }
  
  .nav-links .nav-text {
    position: relative;
    white-space: nowrap;
  }
  
  .nav-links .nav-text .badge {
    width: 1.5625vw;
    height: 1.5625vw;
    min-width: 0;
    padding: 0;
    font-size: 0.73015vw;
    line-height: 1.65vw;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transform: translate(75%, -75%);
    -ms-transform: translate(75%, -75%);
    transform: translate(75%, -75%);
  }
  
  .restart div {
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translate(-50%, 10px);
    -ms-transform: translate(-50%, 10px);
    transform: translate(-50%, 10px);
  }
  
  @media only screen and (min-width:1920px) {
    #slider {
      max-width: 50%;
    }
  }
  
  .ui-slider .ui-corner-all.ui-slider-handle {
    width: 68px;
    height: 68px;
    top: -26px;
    border-radius: 50%;
    outline: red;
    border: red;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: move;
    z-index: 3;
  }
  
  .ui-slider.ui-widget.ui-widget-content {
    font-family: Lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    background-color: #d0d3d4;
    color: #000;
    border-radius: 0.375rem;
    height: 0.75rem;
    border: 0;
    padding-left: 12px;
    padding-right: 12px;
  }
  
  .ui-slider .ui-slider-range {
    border-radius: 0.375rem;
  }
  
  .marker-container {
    margin-top: 36px;
  }
  
  .marker {
    font-size: 1.04175vw;
    font-family: AvenirLTStd-Roman;
  }
  
  span {
    user-select: none;
  }
  
  .first-slide .marker:nth-child(1),
  .last-slide .marker:nth-child(5),
  .marker.active,
  .second-slide .marker:nth-child(2),
  .middle-slide .marker:nth-child(3),
  .fourth-slide .marker:nth-child(4) {
    color: #fc3f31;
    font-weight: 700;
  }
  
  .marker-text {
    position: relative;
  }
  
  .marker-text:before {
    content: "\A";
    background: #8a8d8f;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    position: absolute;
    top: -37px;
    left: 50%;
    right: 50%;
    z-index: 2;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
  }</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;script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.csss"&gt;&lt;/script&gt;
  
  &lt;div id="wrapper" class="bottom-bar-wrapper" style=""&gt;
    &lt;div class="popups-wrapper"&gt;
      &lt;a href="#" class="popup-close is-visible hide"&gt;
        &lt;i class="fa fa-angle-down" aria-hidden="true"&gt;&lt;/i&gt;
      &lt;/a&gt;
  
  
  
  
      &lt;div id="wrapper" class="bottom-bar-inner align-middle align-justify flex-container"&gt;
        &lt;a href="#" class="restart"&gt;
          &lt;img src="/wp-content/themes/poweredbydata/assets/visualisations/pet-map/images/restart.png" alt="restart"&gt;
          &lt;div&gt;Restart&lt;/div&gt;
        &lt;/a&gt;
        &lt;div id="slider" class="timeline-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content middle-slide"&gt;
          &lt;div class="marker-container flex-container align-justify"&gt;
            &lt;span class="marker"&gt;
              &lt;div class="marker-text"&gt;2017&lt;/div&gt;
            &lt;/span&gt;
            &lt;span class="marker"&gt;
              &lt;div class="marker-text"&gt;2018&lt;/div&gt;
            &lt;/span&gt;
            &lt;span class="marker"&gt;
              &lt;div class="marker-text"&gt;2019&lt;/div&gt;
            &lt;/span&gt;
            &lt;span class="marker"&gt;
              &lt;div class="marker-text"&gt;2020&lt;/div&gt;
            &lt;/span&gt;
            &lt;span class="marker"&gt;
              &lt;div class="marker-text"&gt;2021&lt;/div&gt;
            &lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="ui-slider-range ui-corner-all ui-widget-header ui-slider-range-min" style="width: 50%;"&gt;&lt;/div&gt;&lt;span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default" style="left: 50%;"&gt;&lt;/span&gt;&lt;/div&gt;
        &lt;div id="buttons" class="nav-links flex-container align-justify avenir-heavy"&gt;
          &lt;a href="#" data-open=".profile-popup"&gt;&lt;span class="nav-text"&gt;X&lt;span class="badge badge-profile"&gt;2&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;
          &lt;a href="#" data-open=".conditions-popup"&gt;&lt;span class="nav-text"&gt;Y&lt;span class="badge blue badge-conditions hide"&gt;2&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;
          &lt;a href="#" data-open=".locations-popup"&gt;&lt;span class="nav-text"&gt;Z&lt;/span&gt;&lt;/a&gt;
          &lt;a href="#" data-open=".results-popup" class="results-popup-opener no-pointer"&gt;&lt;span class="nav-text"&gt;Results&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>