Диапазон ввода - при увеличении значения (значение ++) и при уменьшении значения (значение--)

Question

Я тестирую скрипт, который включает ползунок диапазона, и столкнулся с проблемой при попытке вернуть другой вывод в зависимости от значения диапазона, вот что я имею в виду под этим ...

$('document').ready(function(){
$('#controller').on('input', function(){
    let value = $('#volume').val();
    if(value++){
        console.log('Value Increased');
    }
    else if(value--){
        console.log('Value Decreased');
    }
});
});

Теперь происходит то, что независимо от того, увеличиваете или уменьшаете значение ползунка, он всегда возвращает «Value Increased», за исключением случая, когда вы устанавливаете ползунок на 0, в этом случае он возвращает «Value Decreased» ...

Я впервые работаю с ползунками диапазона, любая помощь приветствуется!

Answer 1

Проблема в том, что value++ и value-- всегда будут возвращать целое число, а не логическое значение. Использование ненулевого целого числа в условии if всегда приводит к true, следовательно, вы всегда увидите «Значение увеличено», если значение не равно 0.

Для того, чтобы сделать то, что вам требуется, правильный лог c будет хранить предыдущее значение ползунка и сравнивать его с последним, например:

let oldValue = $('#controller').val(); // set when the DOM loads

$('#controller').on('input', function() {
  let currentValue = $('#controller').val();
  if (currentValue > oldValue) {
    console.log('Value Increased');
  } else if (currentValue < oldValue) {
    console.log('Value Decreased');
  } else {
    console.log('No change');
  }
  oldValue = currentValue;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="range" id="controller" min="0" max="100" />