Range selection - changing the color of strokes only when active

Question

I have a price slider that I created that changes the price and the number of elements used, depending on which click you click on the 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>

Run codeHide result

And I use this script to achieve this result:

 $('[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');
     }
   }
 });

However, it is difficult for me to find the panel at intervals to change the color when choosing a range. I tried adding an active class to it, but it just makes the whole screen green, I would like the panel to the left of the selected range to be green, and any bar in front of it to the right remains gray, How can I achieve this without using the active class?

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