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

Posted

技术标签:

【中文标题】如何将滑块固定到我的五步滑块中的标记？【英文标题】：How to fix the slider to the markers in my five-step slider? 【发布时间】：2021-07-27 20:47:57 【问题描述】：

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

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

我的理想结果是有一个适合标记的滑块，在跨显示器移动时需要很少/不需要响应式设计调整（例如 1280 像素、1920 像素）。只是当您选择 2019 年时 - 用户界面句柄实际上就在这一点上。此外，当您选择 2021 时，ui 句柄不会超出范围。

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

如果我找不到更好的解决方案，我的解决方案是使用类来根据类（第一/第二/中间）移动滑块并将其映射。但正如你可以想象的那样，让 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" >
        <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>

【问题讨论】：

【参考方案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 并且易于安装。但是，不幸的是，它不能处理所有显示。

【讨论】：

以上是关于如何将滑块固定到我的五步滑块中的标记？的主要内容，如果未能解决你的问题，请参考以下文章

如何获得范围滑块中的最终值？

为啥我的轮播滑块中的图像没有响应？

将下一个和上一个按钮添加到我的图像滑块

自定义 UISlider 不会结束

如何将滑块与其他复选框过滤器放在一起

如何用内容响应 Nivo 滑块？