how to prevent overlap in 2 input fields type=”number”

i have this html:

<span class="input-group-text pretext">Min:</span>          
<input min="" max="" type="number" class="form-control min-input" name="price_min" value="12">
<br />                              
<span class="input-group-text pretext">Max:</span>
<input min="" max="" type="number" class="form-control max-input" name="price_max" value="25">

js:

$(".min-input, .max-input").on("input change", function(e) {
    var minInput = $(".min-input").val();
    var maxInput = $(".max-input").val();
    if(minInput > maxInput || maxInput < minInput) {
        alert('overlap');   
    }
});

When you put the cursor in the max field at the end of 25 and delete the 5 from 25 with backspace, the remaining number is 2 and is less then the min-input value. But still doesn’t give me any notification “overlap”

What i am doing wrong?

Example fiddle