Просто циклом проходимся и добавляем класс active для label когда текущее значение range input является текстом label:
$(document).on('input change', 'input[type="range"]', function() {
let currentValue = $(this).val();
$('#performance_value').html(currentValue);
// удаляем ative клас у всех .rangeLabel
$('.rangeLabel').removeClass('active');
// перебираем все .rangeLabel
$('.rangeLabel').each(function(idx, item){
// если текущее значение range input'a
// равняется innerText текущего лейбла
if (item.innerText == currentValue) { // $(item).text() == currentValue
// добавляем класс для активного .rangeLabel
item.classList.add('active'); // $(item).addClass('active');
}
});
});
$('label.rangeLabel').click( function(){
$('.rangeLabel').removeClass('active')
$(this).addClass("active");
label = $(this);
value = label.html();
let rng = document.getElementById('performance'); //rng - это ползунок
rng.value = value;
});
label{
cursor: pointer;
}
#performance{
width: 100%;
border: 3px solid #B6B6B6;
}
.performance{
width: 100%;
max-width: 453px;
display: flex;
justify-content: space-between;
font-size: 12px;
}
.rangeLabel.active{
color: #1AA7EC;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<input type="range" value="1000" id="performance" min="1000" max="10000" step="1000">
<p id="performance_value">1000</p>
<div class="performance">
<label for="performance" class="r1 rangeLabel active">1000</label>
<label for="performance" class="rangeLabel">2000</label>
<label for="performance" class="rangeLabel">3000</label>
<label for="performance" class="rangeLabel">4000</label>
<label for="performance" class="r5 rangeLabel">5000</label>
<label for="performance" class="rangeLabel">6000</label>
<label for="performance" class="rangeLabel">7000</label>
<label for="performance" class="rangeLabel">8000</label>
<label for="performance" class="rangeLabel">9000</label>
<label for="performance" class="rangeLabel">10000</label>
</div>
Если label переделать - значение "хранить" в атрибуте (прим. в value), то всё проще и не надо эл-ты перебирать:
$(document).on('input change', 'input[type="range"]', function() {
let currentValue = $(this).val();
$('#performance_value').html(currentValue);
// удаляем ative клас у всех .rangeLabel
$('.rangeLabel').removeClass('active');
// добавляем класс к label с value == currentValue
$('.rangeLabel[value="'+currentValue+'"]').addClass('active');
});
$('label.rangeLabel').click( function(){
$('.rangeLabel').removeClass('active')
$(this).addClass("active");
label = $(this);
value = label.html();
let rng = document.getElementById('performance'); //rng - это ползунок
rng.value = value;
});
label{
cursor: pointer;
}
#performance{
width: 100%;
border: 3px solid #B6B6B6;
}
.performance{
width: 100%;
max-width: 453px;
display: flex;
justify-content: space-between;
font-size: 12px;
}
.rangeLabel.active{
color: #1AA7EC;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<input type="range" value="1000" id="performance" min="1000" max="10000" step="1000">
<p id="performance_value">1000</p>
<div class="performance">
<label for="performance" class="r1 rangeLabel active" value="1000">1000</label>
<label for="performance" class="rangeLabel" value="2000">2000</label>
<label for="performance" class="rangeLabel" value="3000">3000</label>
<label for="performance" class="rangeLabel" value="4000">4000</label>
<label for="performance" class="r5 rangeLabel" value="5000">5000</label>
<label for="performance" class="rangeLabel" value="6000">6000</label>
<label for="performance" class="rangeLabel" value="7000">7000</label>
<label for="performance" class="rangeLabel" value="8000">8000</label>
<label for="performance" class="rangeLabel" value="9000">9000</label>
<label for="performance" class="rangeLabel" value="10000">10000</label>
</div>