Форма сортировки объектов From/To

.from-to-form label { 
    font-weight: normal; 
    margin-right: 10px; 
} 
.from-to-form label:last-of-type { 
    margin-left: 10px; 
} 
.from-to-form input[type="number"] { 
    width: 83px; 
    height: 24px; 
    border-radius: 4px; 
    box-shadow: none; 
 
    border: 2px solid #aaa; 
    font-size: 14px; 
    text-align: center; 
    color: #333; 
    -webkit-transition: all .2s; 
    -moz-transition: all .2s; 
    -ms-transition: all .2s; 
    -o-transition: all .2s; 
    transition: all .2s; 
} 
.from-to-form input[type="number"]:hover { 
    border: 2px solid #ffe69a; 
} 
.from-to-form input[type="number"]:focus { 
    border: 2px solid #ffe69a; 
    background-color: #fef5d3; 
    outline: none; 
} 
.from-to-form input[type="number"]::-webkit-outer-spin-button, 
.from-to-form input[type="number"]::-webkit-inner-spin-button { 
    /* display: none; <- Crashes Chrome on hover */ 
    -webkit-appearance: none; 
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */ 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class="from-to-form"> 
  <label for="price-range-from">From</label> 
  <input id="price-range-from" type="number" placeholder="$15"> 
 
  <label for="price-range-to">To</label> 
  <input id="price-range-to" type="number" placeholder="$232"> 
</form> 
 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#price-range-from").on("change", function(){ 
 	if(parseInt($(this).val()) > parseInt($("#price-range-to").val())) 
 	{ 
 		alert("first value can't be larger then second"); 
 	} 
 	console.log($(this).val()) 
  
 }); 
$("#price-range-to").on("change", function(){ 
 	if(parseInt($(this).val()) < parseInt($("#price-range-from").val())) 
 	{ 
 		alert("Second value can't be smaler then first"); 
 	} 
 	console.log($(this).val()) 
  
 });	 
}); 
 
</script>

var shopFilterMinPrice = 15; 
var shopFilterMaxPrice = 232; 
 
$('#price-range-from').on('change', function() { 
    var minEl = $(this); 
    var maxEl = $('#price-range-to'); 
 
    var minElVal = correctPriceFilterMinValue(minEl.val()); 
    var maxElVal = correctPriceFilterMaxValue(maxEl.val()); 
 
    if (minElVal > maxElVal) { 
        minElVal = maxElVal; 
    } 
 
    minEl.val(minElVal); 
    maxEl.val(maxElVal); 
}); 
 
$('#price-range-to').on('change', function() { 
    var minEl = $('#price-range-from'); 
    var maxEl = $(this); 
 
    var minElVal = correctPriceFilterMinValue(minEl.val()); 
    var maxElVal = correctPriceFilterMaxValue(maxEl.val()); 
 
    if (minEl.val()) { 
        if (maxElVal < minElVal) { 
            maxElVal = minElVal; 
        } 
    } else { 
        if (maxElVal < shopFilterMinPrice) { 
            maxElVal = shopFilterMinPrice; 
        } 
    } 
 
    minEl.val(minElVal); 
    maxEl.val(maxElVal); 
}); 
 
function correctPriceFilterMinValue(val) { 
    var inpMinVal = val; 
 
    if (inpMinVal && /[^0-9]/.test(inpMinVal) == false) { 
        inpMinVal = parseInt(inpMinVal); 
        if (inpMinVal < shopFilterMinPrice) { 
            inpMinVal = shopFilterMinPrice; 
        } 
    } else { 
        inpMinVal = shopFilterMinPrice; 
    } 
 
    return inpMinVal; 
} 
 
function correctPriceFilterMaxValue(val) { 
    var inpMaxVal = val; 
 
    if (inpMaxVal && /[^0-9]/.test(inpMaxVal) == false) { 
        inpMaxVal = parseInt(inpMaxVal); 
        if (inpMaxVal > shopFilterMaxPrice) { 
            inpMaxVal = shopFilterMaxPrice; 
        } 
    } else { 
        inpMaxVal = shopFilterMaxPrice; 
    } 
 
    return inpMaxVal; 
}

.from-to-form label { 
    font-weight: normal; 
    margin-right: 10px; 
} 
.from-to-form label:last-of-type { 
    margin-left: 10px; 
} 
.from-to-form input[type="number"] { 
    width: 83px; 
    height: 24px; 
    border-radius: 4px; 
    box-shadow: none; 
 
    border: 2px solid #aaa; 
    font-size: 14px; 
    text-align: center; 
    color: #333; 
    -webkit-transition: all .2s; 
    -moz-transition: all .2s; 
    -ms-transition: all .2s; 
    -o-transition: all .2s; 
    transition: all .2s; 
} 
.from-to-form input[type="number"]:hover { 
    border: 2px solid #ffe69a; 
} 
.from-to-form input[type="number"]:focus { 
    border: 2px solid #ffe69a; 
    background-color: #fef5d3; 
    outline: none; 
} 
.from-to-form input[type="number"]::-webkit-outer-spin-button, 
.from-to-form input[type="number"]::-webkit-inner-spin-button { 
    /* display: none; <- Crashes Chrome on hover */ 
    -webkit-appearance: none; 
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */ 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form class="from-to-form"> 
  <label for="price-range-from">From</label> 
  <input id="price-range-from" type="number" placeholder="$15"> 
 
  <label for="price-range-to">To</label> 
  <input id="price-range-to" type="number" placeholder="$232"> 
</form>