Wtyczka suwaka Jquery obsługująca "wiele uchwytów dystansowych"

Question

Szukałem suwaka z interfejsem Jquery UI, który obsługuje wiele uchwytów dystansowych. Istniejący suwak Jquery UI obsługuje tylko jeden zbiór wartości zakresu. Szukam suwaka, który możesz mieć wiele zakresów. Tak więc zakres z zakresem wewnętrznym lub dwoma zakresami, które się nie nakładają.

przykład:

R = uchwyt prętem

XX = suwak,

= lub - = zakres pomiędzy uchwytami

XXR1 ------ R1XXXR2 - R2XXXXXXXXX

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

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

Nie sądzę, że istnieje suwak, który może to zrobić? Chciałem tylko upewnić się, zanim pójdę i napisać jeden.

Answer 1

Oto jak to zrobiłem.

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>'); 
     } 
    }); 
}); 

Im na pewno może być bardziej zoptymalizowane, ale to powinno dać Ci ogólne pojęcie

Answer 2

Właśnie wydany Elessar wypełnić dokładnie ten niszę. colResizable jest w porządku, ale nie jest właściwym narzędziem do tego zadania.