javascript - 范围选择器 - 仅在事件时更改条形颜色

Question

我创建了一个价格 slider ，它会根据您在 slider 中单击的跨度来更改所用商品的价格和数量:

.price-slider {
  margin-bottom: 29px;
  width: 254px;
}
.price-slider .slider-count {
  font-size: 13px!important;
  font-weight: 600;
  margin-bottom: 13px;
}
.price-slider .price-slider-box {
  position: relative;
  height: 12px;
  margin-top: 12px;
}
.price-slider .price-slider-box .price-slider-bar {
  position: relative;
  height: 3px;
  top: 5px;
  background-color: #ddd;
  cursor: pointer;
}
.price-slider .price-slider-box .price-slider-bar .price-slider-disc {
  position: absolute;
  top: -5px;
  height: 12px;
  width: 12px;
  background-color: #ddd;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}
.price-slider .price-slider-box .price-slider-bar .price-slider-disc.price-slider-disc-2 {
  left: 28px;
}
.price-slider .price-slider-box .price-slider-bar .price-slider-disc.price-slider-disc-3 {
  left: 60px;
}
.price-slider .price-slider-box .price-slider-bar .price-slider-disc.price-slider-disc-4 {
  left: 92px;
}
.price-slider .price-slider-box .price-slider-bar .price-slider-disc .price-slider-disc-5 {
  left: 124px;
}
.price-slider .price-slider-box .price-slider-bar .price-slider-disc.price-slider-disc-6 {
  left: 156px;
}
.price-slider .price-slider-box .price-slider-bar .price-slider-disc.price-slider-disc-7 {
  left: 188px;
}
.price-slider .price-slider-box .price-slider-bar .price-slider-disc.price-slider-disc-8 {
  left: 220px;
}
.price-slider .price-slider-box .price-slider-bar .price-slider-disc.price-slider-disc-9 {
  left: 252px;
}
.price-slider .price-slider-box .price-slider-bar .price-slider-disc.price-slider-disc-active {
  background-color: #54d8a3;
}
.price-slider .price-slider-box .price-slider-bar .slider-handle {
  position: absolute;
  height: 19px;
  width: 19px;
  cursor: pointer;
  outline: none;
  margin-left: -5px;
  margin-top: -5px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  background-color: #f4f4f4;
  z-index: 1;
}
.price-slider .price-slider-box .price-slider-range {
  background-color: #54d8a3;
  width: 0;
  height: 3px;
  position: absolute;
  left: 0;
  top: 5px;
}

<div class="price-slider">
  <h2 class="slider-count"><span class="js-slider-count" data-count="starter">100</span> items/month</h2> <!-- HERE --> 
  <div class="price-slider-box">
    <div class="price-slider-bar">
      <span data-option="starter" data-price-value="24" data-count-value="100" class="price-slider-disc price-slider-disc-2 price-slider-disc-active"></span>
      <span data-option="starter" data-price-value="30" data-count-value="200" class="price-slider-disc price-slider-disc-3"></span>
      <span data-option="starter" data-price-value="40" data-count-value="300" class="price-slider-disc price-slider-disc-4"></span>
      <span data-option="starter" data-price-value="50" data-count-value="400" class="price-slider-disc price-slider-disc-5"></span>
      <span data-option="starter" data-price-value="60" data-count-value="500" class="price-slider-disc price-slider-disc-6"></span>
      <span data-option="starter" data-price-value="70" data-count-value="600" class="price-slider-disc price-slider-disc-7"></span>
      <span data-option="starter" data-price-value="80" data-count-value="700" class="price-slider-disc price-slider-disc-8"></span>
      <span data-option="starter" data-price-value="90" data-count-value="800" class="price-slider-disc price-slider-disc-9"></span>
    </div>
  </div>
</div>

我正在使用这个脚本来实现这个结果:

 $('[data-option]').click(function () {
   var type = this.getAttribute('data-option');
   var value = this.getAttribute('data-price-value');
   var count = this.getAttribute('data-count-value');

   var priceContainer = document.querySelector('[data-price="' + type + '"]');
   var countContainer = document.querySelector('[data-count="' + type + '"]');
   if (typeof priceContainer !== 'undefined' && priceContainer !== null) {
     priceContainer.innerHTML = value;
   }

   if (typeof countContainer !== 'undefined' && countContainer !== null) {
     countContainer.innerHTML = count;
   }

   var options = document.querySelectorAll('[data-option="' + type + '"]');
   for (var i = 0, l = options.length; i < l; i++) {
     if (options[i].getAttribute('data-price-value') <= value) {
       $(options[i]).addClass('price-slider-disc-active');
     } else {
       $(options[i]).removeClass('price-slider-disc-active');
     }
   }
 });

但是，我很难让跨度后面的栏在选择跨度时更改颜色。我已经尝试向它添加一个事件类，但它只会使整个条形变为绿色，我想要的是所选跨度左侧的条形为绿色，右侧前面的任何条形保持灰色.如何在不使用事件类的情况下实现这一目标？

Answer 1

你可以做的是使用一个伪元素来模仿这条线。目前该栏是一个没有中断的实心栏，因此您必须在元素之间创建一个栏以使其看起来像其选中的:

https://jsfiddle.net/5r0n62yg/1/

.price-slider-disc-active::before {
  width: 21px;
  height: 3px;
  background: green;
  display: block;
  position: absolute;
  left: -21px;
  top: 5px;
  content:'';
}