title: Controlling input number field min/max
body: <p>I have these two input fields that represent a range of time (seconds), and I need to make it so the "from/min" field can't go higher than the "to/max" and viceversa.</p>
  
  <p>So far I got this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(document).ready(function(){
   jQuery('#from').on( 'input', function( ) {
     if( parseInt( jQuery('#from').val() ) &gt;= parseInt( jQuery('#to').val() ) ) jQuery('#from').val( parseInt( jQuery('#from').val() ) - 1 );
   });
    
   jQuery('#to').on( 'input', function( ) {
     if( parseInt( jQuery('#to').val() ) &lt;= parseInt( jQuery('#from').val() ) ) jQuery('#to').val( parseInt( jQuery('#to').val() ) + 1 );
   });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  From: &lt;input type="number" min="10" step="1" id="from" value="60"&gt;&lt;br /&gt;
  To: &lt;input type="number" min="11" step="1" id="to" value="120"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It works fine when using the field or keyboard arrows, but I can still type any number/+/- on it and go lower/higher than the other field.</p>
  
  <p>I am using:</p>
  
  <pre><code>jQuery('#from, #to').on( 'keypress', function( e ) {
      e.preventDefault();
  });
  </code></pre>
  
  <p>to prevent typing as a workaround at the moment, but I'd like to be able to type a number in while still keeping the limitation of not being able to go lower/higher than the other field</p>
  
  <p>How can I do this?</p>