如何将滑块固定到我的五步滑块中的标记？

Question

我已经尽力附加了一个 CSS 版本的包装器，但我在使用滑块（弹性框中的第二项）时遇到了很多问题。

这是一个 5 步滑块，我试图与其 5 个标记对齐，表示为 2017 年到 2021 年。但是，右侧每次都超出了我们的界限，并且没有与标记本身对齐。我已尽力创建一个可行的版本，但这个项目分配给我时没有任何注释，我正在苦苦挣扎。

我的理想结果是有一个适合标记的滑块，在跨显示器（1280 像素、1920 像素，例如）时需要非常 little/no 响应式设计调整。只是当你 select 说 2019 - ui 句柄实际上就在那个点上。此外，当您 select 2021 时，ui 句柄不会越界。

$year 变量是从 options.inc 文件中读入的 range(2017, 2021)，它附加了标记。但是滑块和标记之间存在脱节。

如果找不到更好的解决方案，我的解决方案是使用 classes 根据 class (first/second/middle) 移动滑块并将其映射。但是正如您想象的那样，CSS 重叠 JS 会产生一些我试图避免的尴尬动画。

(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);

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%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.csss"></script>

<div id="wrapper" class="bottom-bar-wrapper" style="">
  <div class="popups-wrapper">
    <a href="#" class="popup-close is-visible hide">
      <i class="fa fa-angle-down" aria-hidden="true"></i>
    </a>




    <div id="wrapper" class="bottom-bar-inner align-middle align-justify flex-container">
      <a href="#" class="restart">
        <img src="/wp-content/themes/poweredbydata/assets/visualisations/pet-map/images/restart.png" alt="restart">
        <div>Restart</div>
      </a>
      <div id="slider" class="timeline-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content middle-slide">
        <div class="marker-container flex-container align-justify">
          <span class="marker">
            <div class="marker-text">2017</div>
          </span>
          <span class="marker">
            <div class="marker-text">2018</div>
          </span>
          <span class="marker">
            <div class="marker-text">2019</div>
          </span>
          <span class="marker">
            <div class="marker-text">2020</div>
          </span>
          <span class="marker">
            <div class="marker-text">2021</div>
          </span>
        </div>
        <div class="ui-slider-range ui-corner-all ui-widget-header ui-slider-range-min" style="width: 50%;"></div><span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default" style="left: 50%;"></span></div>
      <div id="buttons" class="nav-links flex-container align-justify avenir-heavy">
        <a href="#" data-open=".profile-popup"><span class="nav-text">X<span class="badge badge-profile">2</span></span></a>
        <a href="#" data-open=".conditions-popup"><span class="nav-text">Y<span class="badge blue badge-conditions hide">2</span></span></a>
        <a href="#" data-open=".locations-popup"><span class="nav-text">Z</span></a>
        <a href="#" data-open=".results-popup" class="results-popup-opener no-pointer"><span class="nav-text">Results</span></a>
      </div>
    </div>
  </div>

Answer 1

我想出了一个临时解决方案，是的，质量有点低，但我怀疑每个人都会注意到。

我为最常用的两个显示创建了一个媒体查询，它应该有望处理滚动条的脱节性质。

@media only screen and (min-width:1920px) {
  .first-slide span.ui-slider-handle.ui-corner-all.ui-state-default {
    margin-left: 0%;
  }

  .second-slide span.ui-slider-handle.ui-corner-all.ui-state-default {
    margin-left: -2%;
  }

  .middle-slide span.ui-slider-handle.ui-corner-all.ui-state-default {
    margin-left: -4%;
  }

  .fourth-slide span.ui-slider-handle.ui-corner-all.ui-state-default {
    margin-left: -6.25%;
  }

  .last-slide span.ui-slider-handle.ui-corner-all.ui-state-default {
    margin-left: -8.5%;
  }
 }


 @media only screen and (min-width:1280px) {
  .first-slide span.ui-slider-handle.ui-corner-all.ui-state-default {
    margin-left: 1.5%;
  }

  .second-slide span.ui-slider-handle.ui-corner-all.ui-state-default {
    margin-left: -3.75%;
  }

  .middle-slide span.ui-slider-handle.ui-corner-all.ui-state-default {
    margin-left: -6.25%;
  }

  .fourth-slide span.ui-slider-handle.ui-corner-all.ui-state-default {
    margin-left: -9%;
  }

  .last-slide span.ui-slider-handle.ui-corner-all.ui-state-default {
    margin-left: -11.5%;
  }

这是通过眼睛完成的，并将手柄放在标记上。它是 CSS 并且易于安装。但是，不幸的是它不能处理所有显示。

如何将滑块固定到我的五步滑块中的标记？

How to fix the slider to the markers in my five-step slider?

javascript

css

jquery

jquery-ui