0

Всем привет. Подскажите пожалуйста как сделать отслеживание активного значения из input? Когда пользователь двигает ползунок нужно менять цвет у активного label

(Как пример нажатие на цифры)

$(document).on('input change', 'input[type="range"]', function() {
     $('#performance_value').html($(this).val());
});

$('label.rangeLabel').click( function(){
    $('.rangeLabel').removeClass('active')
    $(this).addClass("active");
    label = $(this);
    value = label.html();
    var rng=document.getElementById('performance'); //rng - это ползунок
    rng.value=value;
    console.log(rng.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>

1 ответ 1

4

Просто циклом проходимся и добавляем класс 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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.