jQuery UI Slider with 2 handles - prevent crossing

Question

I am working on a jQuery UI slider which has 2 handles. I would like to make it so that the right handle cannot cross paths with the left handle. They can both be the same value(i.e. they can both have a value of 2), but the right handle should never be a lower number than the left handle. Is this possible?

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

    $('input.value').change(function() {
        var $this = $(this);
        $('#slider').slider('values', $this.attr('data-index'), $this.val());
    });
});

#slider {
  margin-bottom:20px;
}
input[data-index="1"] {
  float:right;
}

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">

<div id="slider"></div>
<div>
  <input type="text" class="value" data-index="0" value="0" />
  <input type="text" class="value" data-index="1" value="4" />
</div>

I have a related demo snippet on [this answer](https://stackoverflow.com/a/68834441/8112776). — ashleedawg, Aug 18 '21 at 14:37

score 1 · Answer 1 · answered May 17 '18 at 00:22

You can use range: true to set the range option. You can also hide the range with CSS. Example:

$(document).ready(function() {
  $('#slider').slider({
    min: 0,
    max: 4,
    step: .1,
    values: [0, 4],
    range: true,
    slide: function(event, ui) {
      $.each(ui.values, function(i, v) {
        $('input.value').eq(i).val(v);
      });
    }
  });

  $('input.value').change(function() {
    var $this = $(this);
    $('#slider').slider('values', $this.attr('data-index'), $this.val());
  });
});

#slider {
  margin-bottom: 20px;
}

#slider div.ui-slider-range {
  background: transparent;
}

input[data-index="1"] {
  float: right;
}

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">

<div id="slider"></div>
<div>
  <input type="text" class="value" data-index="0" value="0" />
  <input type="text" class="value" data-index="1" value="4" />
</div>

jQuery UI Slider with 2 handles - prevent crossing

1 Answers1