Jquery binding number inputs doesn't work when increasing powers of ten (1000, 10000, 100000, etc.)

Viewed 133

I have two number inputs bound to each other that increment in 1000s, one is an upper range and one is a lower range. Whenever the lower range is set higher than the upper range, the upper range automatically changes 'value' and 'min' attribute to match the lower range value.

However, every time the upper range input reaches a power of ten threshold (9000, 90000, etc.) from increasing the lower range value, it just stops while the lower range is able to continue. Does anyone know why this is and how to stop this from happening?

https://jsfiddle.net/tg0ck5r1/

HTML:

<input type="number" id="upperBidRange" step="1000" >
<input type="number" id="lowerBidRange" step="1000" min="1000" value="1000">

JS:

function SetBidIncrementAmountAndUpperBidRangeMins() {
        $('#upperBidRange').attr('min', $('#lowerBidRange').val());
    }

function SetBidIncrementAmountAndUpperBidRangeValues() {
  $('#upperBidRange').val($('#lowerBidRange').val())
}

$(SetBidIncrementAmountAndUpperBidRangeMins);
$(SetBidIncrementAmountAndUpperBidRangeValues);

$('#lowerBidRange').bind('keyup mouseup onwheel input keypress change paste', function () {
  SetBidIncrementAmountAndUpperBidRangeMins();

  if ($('#lowerBidRange').val() > $('#upperBidRange').val()) {
    $(SetBidIncrementAmountAndUpperBidRangeValues);
  }
});
1 Answers
Related