How can I restrict the range of a jQuery UI slider?
<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>