JSFiddle - React, Tailwind, and code Playground

by Maksim

HTML

<div class="timeline" data-nom="3000">
  <input class="timeline__input" type="radio" name="timeline" id="timeline1" value="500">
  <label class="timeline__label" for="timeline1"></label> 
  
  <input class="timeline__input" type="radio" name="timeline" id="timeline2" value="100">
  <label class="timeline__label" for="timeline2"></label> 

  <input class="timeline__input" type="radio" name="timeline" id="timeline3" value="300">
  <label class="timeline__label" for="timeline3"></label> 

  <input class="timeline__input" type="radio" name="timeline" id="timeline4" value="800">
  <label class="timeline__label" for="timeline4"></label>
  <div class="timeline__count">3000</div>
</div>





<div class="timeline" data-nom="1000">
  <input class="timeline__input" type="radio" name="timeline1" id="timeline1-1" value="500">
  <label class="timeline__label" for="timeline1-1"></label> 
  
  <input class="timeline__input" type="radio" name="timeline1" id="timeline1-2" value="100">
  <label class="timeline__label" for="timeline1-2"></label> 

  <input class="timeline__input" type="radio" name="timeline1" id="timeline1-3" value="300">
  <label class="timeline__label" for="timeline1-3"></label> 

  <input class="timeline__input" type="radio" name="timeline1" id="timeline1-4" value="800">
  <label class="timeline__label" for="timeline1-4"></label>
  <input class="timeline__input" type="radio" name="timeline1" id="timeline1-5" value="100">
  <label class="timeline__label" for="timeline1-5"></label> 

  <input class="timeline__input" type="radio" name="timeline1" id="timeline1-6" value="300">
  <label class="timeline__label" for="timeline1-6"></label> 

  <input class="timeline__input" type="radio" name="timeline1" id="timeline1-7" value="800">
  <label class="timeline__label" for="timeline1-7"></label>
  <div class="timeline__count">1000</div>
</div>

CSS

.timeline {
  display: flex;
  justify-content: stretch;
  flex-flow: row-reverse;
  padding: 50px 0;
  position: relative;
  z-index: 0;
}

.timeline__count {
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: 10px;
}

.timeline__label {
  width: 100%;  
  display: flex;
  position: relative;
  z-index: 0;
}
.timeline__input {
  display: none;
}

.timeline__label::before {
  content: "";
  display:block;
  margin: auto;
  padding: 30px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.timeline__label::after {
  content: "";
  display: block;
  height: 15px;
  width: 100%;
  position: absolute;
  right: 50%;
  top: 50%;
  z-index: 0;
  transform: translateY(-50%);  
  margin: auto;
  background: #ccc;
}

.timeline__label:last-of-type {
  transform: scale(1.5);
}
.timeline__label:last-of-type::after {
  display: none;
}

.timeline__input:checked ~ .timeline__label::before,
.timeline__input:checked ~ .timeline__label::after {
  background: green;
}

JavaScript

$(".timeline").each(function(){
	const $box = $(this),
  	nom = $box.data("nom") || 0,
    $inputs = $(".timeline__input", $box),
    inpCount = $inputs.length,
    $countBox = $(".timeline__count", $box);
    
  function calc(){
  	const $currInp =  $inputs.filter(":checked");
    let count = nom;
    if( $currInp.get(0) ){
    	const index = $inputs.index($currInp),
      	$prepends =  $inputs.slice(index, inpCount);
        
    	$prepends.each(function(){
      	const nowCount = $(this).val() || 0;
        count += parseInt(nowCount);
      });
    }
    
    $countBox.html(count);
  }
  $inputs.on("change", calc);
  calc();
});