Cómo evitar que el control deslizante jQuery UI se superponga?

Question

Usando jQuery-UI 1.7, tengo deslizador integrado. Todo funciona bien, pero las manijas del control deslizante se superponen entre sí mientras arrastran. ¿Cómo puedo prevenir esto?

Usted puede ver mi deslizador ui aquí

Vista predeterminada:

vista superpuesta:

Answer 1

Usted puede lograr esto mediante la detección de una superposición en un slide controlador de eventos y devolver falso para evitar que ocurra la diapositiva . Ejemplo:

$("#slider-range").slider({ 
 
    range: true, 
 
    min: 0, 
 
    max: 500, 
 
    values: [ 75, 300 ], 
 
    slide: function(event, ui) { 
 
     if ((ui.values[ 0 ] + 20) >= ui.values[ 1 ]) { 
 
      return false; 
 
     } 
 
    } 
 
});

body { padding: 50px; }

<link href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet"> 
 
<script src="http://code.jquery.com/jquery-1.11.1.js"></script> 
 
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script> 
 
<div id="slider-range"></div>

Tenga en cuenta que en este ejemplo el valor de 20 está codificado simplemente sobre la base de la anchura del mango. Según su caso de uso, tendrá que cambiar eso a lo que sea que tenga sentido.

Answer 2

<script> 
    $("#slider-range").slider({ 
     range: true, 
     min: 0, 
     max: 500, 
     values: [ 75, 300 ], 
     slide: function(event, ui) { 
      if ((ui.values[0] + 55) >= ui.values[1]) { 
       return false; 
      } 
     } 
    });​ 
</script>