范围选择器 - 仅在活动时更改条形颜色

Question

我创建了一个价格滑块，它会根据您在滑块中单击的跨度来更改正在使用的商品的价格和数量：

.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:'';
}

Answer 2

$('[data-option]').click(function () {
    $(this).css('color','green');
}