title: How can I restrict the range of a jQuery UI slider?
body: <p>I have created a <strong>jQuery UI slider</strong>, which has its <code>range</code> set to <code>true</code> and has two handles at 0 and 4. I want to restrict the range of these handles to a maximum of 4. This means when user slides one of the handles and the position of other makes the range go beyond 4 then the other handle should slide to keep the range as 4 but if it the range is less than 4 then it shouldn't slide.</p>
  
  <p>This means if <code>ui.values[0]</code> is equal to <code>0</code> and user slides the other handle to say 10, then this handle should slide to 6 along with it.
  But, if <code>ui.values[0]</code> is equal to <code>2</code> and the user slides the other handle to <code>4</code>, then it should remain where it is.</p>
  
  <p>Some example sets of values are : </p>
  
  <ol>
  <li>1 to 5</li>
  <li>0 to 4</li>
  <li>0 to 2</li>
  <li>16 to 19</li>
  </ol>
  
  <p>I've created a JSFiddle to try on this: <a href="https://jsfiddle.net/j4hd760f/" rel="nofollow noreferrer">https://jsfiddle.net/j4hd760f/</a></p>
  
  <p>Code from JSFiddle as a snippet:
  <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>$('.slider').slider({
      range: true,
      values: [0, 4],
      slide: function (ev, ui) {
          var ui1 = ui.values[0];
          var ui2 = ui.values[1];
          $('.slider').not(this).each(function () {
              total += $(this).slider('value');
          })
          $('#total').text(ui1 + " " + ui2);
      }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.slider {
      margin: 16px;
      width: 200px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"&gt;
  &lt;div id="slider1" class="slider"&gt;&lt;/div&gt;
  &lt;div id="total"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>