Plugin deslizante de Jquery que admite "Varias manijas a distancia"

He estado buscando un plugin deslizante Jquery UI que admita varios manejadores de rango. El control deslizante existente de Jquery UI solo admite un conjunto de valores de rango. Estoy buscando un control deslizante que puede tener rangos múltiples. Entonces, un rango con un rango interno o dos rangos que no se superponen.Plugin deslizante de Jquery que admite "Varias manijas a distancia"

Ejemplo:

R = manejar

XX = deslizante bar

= o - = Intervalo entre las manijas

XXR1 ------ R1XXXR2 - R2XXXXXXXXX

XXXR1 ---- R2 ==== R2 ----- R1XXXXXX

XXXR1 - R2 === R2 --- -R3 === R3 - R1XXXX

No creo que haya un control deslizante que pueda hacer esto? Solo quería asegurarme antes de ir y escribir uno.

Fuente

2009-10-07 StarSignLeo

¿Hay alguna razón en particular que no se puede utilizar múltiples controles deslizantes (uno para cada rango)? Para esto, podrías usarlos para unir al otro, así que si uno es un rango externo, el otro no podría deslizarse más allá de los límites establecidos por el exterior. – cdeszaq

Así es como lo hice.

myarr = [ 65, 80, 90 ]; 
$(function() { 
    $("#slider-range").slider({ 
     min: 0, 
     max: 100, 
     values: myarr, 
     slide: function(event, ui) { 
      if (ui.values[0] >= ui.values[1]) { 
       return false; 
      } 
      if (ui.values[1] >= ui.values[2]) { 
       return false; 
      } 
      $(this).find(".range0").css({ "width": ui.values[0] + "%" }); 
      $(this).find(".range1").css({ "left": ui.values[0] + "%", "width": (ui.values[1]-ui.values[0]) + "%" }) ; 
      $(this).find(".range2").css({ "left": ui.values[1] + "%", "width": (ui.values[2]-ui.values[1]) + "%" }) ; 
      $(this).find(".range3").css({ "left": ui.values[2] + "%", "width": (100-ui.values[2]) + "%" }) ; 
     }, 
     create: function(event, ui) { 
       $(this).append('<div class="ui-slider-range ui-widget-header range0" style="left: 0%; width: ' + myarr[0] + '%; background: none repeat scroll 0% 0% #CF1920;"></div>'); 
       $(this).append('<div class="ui-slider-range ui-widget-header range1" style="left: ' + myarr[0] + '%; width: ' + (100-myarr[1]) + '%; background: none repeat scroll 0% 0% #FFE900;"></div>'); 
       $(this).append('<div class="ui-slider-range ui-widget-header range2" style="left: ' + myarr[1] + '%; width: ' + (100-myarr[2]) + '%; background: none repeat scroll 0% 0% #26CF2D;"></div>'); 
       $(this).append('<div class="ui-slider-range ui-widget-header range3" style="left: ' + myarr[2] + '%; width: ' + (100-myarr[2]) + '%; background: none repeat scroll 0% 0% #00BCFF;"></div>'); 
     } 
    }); 
});

Estoy seguro de que se puede optimizar más, pero esto debe darle la idea general

Fuente

2011-08-24 17:04:41 shitburg

Acabo de liberar Elessar para llenar este nicho exacta. colResizable está bien, pero no es realmente la herramienta adecuada para el trabajo.

Fuente

2013-11-07 18:59:32

¡Esto es asombroso! –

@Matt Brennan Realmente me gusta esto pero necesito uno sin ningún espacio ... ¿Y el primer rango debería ser reparado, posible? ¡Gracias! – tim

@tim, no con Elessar actualmente, me temo. Los rangos fijos están en la hoja de ruta, pero eliminar los huecos sería complicado con nuestro diseño actual. –

Plugin deslizante de Jquery que admite "Varias manijas a distancia"

Respuesta

Cuestiones relacionadas