0

Делаю скрипт для отслеживания расстояния и столкнулся с проблемой, что не могу правильно сделать отсчет если расстояние больше 10 км.

Картинка-пример если расстояние от 0 до 10 я отнимаю по 1км (это работает), если же расстояние от 10 до 50 я хочу прибавлять по 4 к каждому шагу, таким образом как раз получится 50км. Прикрепляю мой код снизу чтобы вы лучше поняли в чем тут суть.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="filter__distance-input" id="step" type="range" min="0" max="21" value="10">
<br>
<label id="step_counter">10</label>

<script>
$('#step').bind('change mousemove', function(){
    let thisStep = $(this).val();
    thisStep = Math.floor(thisStep <= 10 ? thisStep : thisStep+4);
    $('#step_counter').text(thisStep);
});
</script>

Я думаю что нужно преобразовать текст из label в числовую переменную и все. Но возможно вы сможете предложить и другой вариант? Заранее всем благодарен за ответы!

2
  • parseInt(thisStep) - преобразовали в число и может складывать parseInt(thisStep) + 4
    – Doigrales
    22 янв 2019 в 9:23
  • Оно все равно прибавляет 11 к стрингу почему-то. Попробуйте сами. Получается 114, 124 и так далее
    – Daniil Lav
    22 янв 2019 в 9:32

1 ответ 1

3

Нужно преобразовать значение input из строки в число

$('#step').on('change mousemove', function() {
  let thisStep = Number($(this).val());
  if (thisStep > 10) {
    thisStep = 10 + 4 * (thisStep - 10);
  }
  $('#step_counter').text(thisStep);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="filter__distance-input" id="step" type="range" min="0" max="21" value="10">
<br>
<label id="step_counter">10</label>

2
  • 1
    Кажется, ТС хотел прибавлять по 4 к каждому шагу. 22 янв 2019 в 10:49
  • Спасибо большое!
    – Daniil Lav
    22 янв 2019 в 12:55

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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