Handles blocking each other in JQuery UI range slider

Question

I am playing around with the jQuery UI slider and found two examples that look very similar to me. However, the first slider allows for a handle to be dragged to the other side other handle, whereas the in the second slider, the handles seem to be blocking each other (i.e. you cannot drag the left handle to the right side of the right handle and vice versa).

Can somebody explain to me, why this is happening ?

Here is the fiddle: http://jsfiddle.net/w4gy8p1v/1/

Code for slider:

$(document).ready(function() {
    $("#slider").slider({
        min: 0,
        max: 100,
        step: 1,
        values: [10, 90],
        slide: function(event, ui) {
            for (var i = 0; i < ui.values.length; ++i) {
                $("input.sliderValue[data-index=" + i + "]").val(ui.values[i]);
            }
        }
    });

    $("input.sliderValue").change(function() {
        var $this = $(this);
        $("#slider").slider("values", $this.data("index"), $this.val());
    });
});

<form>
    <div>
        <input type="text" class="sliderValue" data-index="0" value="10" />
        <input type="text" class="sliderValue" data-index="1" value="90" />
    </div>
    <br />
    <div id="slider"></div>
</form>

Code for second slider:

  $(function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 500,
      values: [ 75, 300 ],
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
      }
    });
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
      " - $" + $( "#slider-range" ).slider( "values", 1 ) );
  });

<p>
  <label for="amount">Price range:</label>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>

<div id="slider-range"></div>

Answer 1

The difference comes from the range option (range: true).

When the range option is true, the slider handles can't cross.