Jquery UI: control deslizante de rango. ¿Qué control deslizante se mueven?

Question

En esta página de prueba: http://jqueryui.com/demos/slider/#event-change

El 'slide' reescritura evento tiene dos entradas a la vez:

$("#amount").val("$" + $("#slider-range").slider("values", 0) + 
      " - $" + $("#slider-range").slider("values", 1)); 

Para mis propósitos que quiero saber, cuál de los dos deslizadores se mueven (mínimos y máximos) . ¿Cómo puedo obtenerlo?

Answer 1

@Nikoole, no hay ningún método específico para encontrar la que se desliza la manija, pero usted podría intentar este truco

var minSlide = 75, maxSlide = 300; 
$("#slider-range").slider({ 
    range: true, 
    min: 0, 
    max: 500, 
    values: [ 75, 300 ], 
    slide: function(event, ui) { 
     if(minSlide != parseInt(ui.values[0], 10)){ 
      // Do what in minimum handle case 
     } 
     else if(maxSlide != parseInt(ui.values[1], 10)) { 
      // Do what in maximum handle case 
     } 
    }, 
    stop: function(event, ui){ 
     minSlide = parseInt(ui.values[0], 10); 
     maxSlide = parseInt(ui.values[1], 10);    
    } 
}); 

Esperamos que esto ayude.

Answer 2

Incluso yo enfrenté el mismo problema recientemente. Al usar un control deslizante de rango, debe determinar qué control deslizante (derecho o izquierdo) se movió. Hay sin forma directa manera de determinarlo, pero sin embargo, el objeto ui tiene atributos, value y values que puede usar para determinar qué control deslizante se movió. Aquí está la solución que funcionó para mí: -

 $("#slider-range").slider({ 
     range: true, 
     min: 75, 
     max: 300, 
     values:[75,300], 
     slide: function(event, ui) { 
     target_name = '' 
     if(ui.values[0] == ui.value) target_name = 'min_price' 
     else if(ui.values[1] == ui.value) target_name = 'max_price' 
     alert(target_name) 
     } 

Answer 3

He resuelto esto estableciendo atributo ID a min y max selectores de crear evento definido por API deslizador http://api.jqueryui.com/1.8/slider/#event-create.

  create:function(event, ui) 
     { 
     var handlers = $('.ui-slider-handle'); 
     $.each(handlers, function(i, element) 
     { 
      if(i == 0) 
       $(element).attr('id', 'slider-handler-min'); 
      else 
       $(element).attr('id', 'slider-handler-max'); 
     }); 
     } 

... y luego de vuelta en mi caso me slide atributo ID simplemente rojo de ui.handler para conseguir lo que uno se mueve :)

Answer 4

manejador de cursor derecho es el último hijo del contenedor deslizante, por lo que, a diferencia de controlador izquierdo, controlador derecho no ha nextSibling:

$('#slider-range').slider({ 
    range: true, 
    min: 0, max: 500, 
    values: [ 75, 300 ], 
    slide: function(event, ui) { 
     if (ui.handle.nextSibling) { 
      // Moving LEFT slider ... 
     } else { 
      // Moving RIGHT slider ... 
     } 
    } 
}); 

Answer 5

El evento de diapositivas toma dos parámetros: evento y ui. ui contiene un objeto de asa. Puede acceder y probar el índice del mango, así:

$("#slider-range").slider({ 
    range: true, 
    min: 0, 
    max: 500, 
    values: [ 75, 300 ], 
    slide: function(event, ui) { 
     var index = $(ui.handle).index(); 
     if (index == 1) { 
      // do stuff for minimum 
     } 
     if (index == 2) { 
      // do stuff for maximum 
     } 
    } 
}); 

Esto funciona para cualquier número de identificadores en un deslizador dado. Pero tenga en cuenta que los índices comienzan en 1 no 0.