「複数の範囲のハンドル」をサポートするJqueryスライダのプラグイン

Question

複数のレンダリングハンドルをサポートするJquery UIスライダのプラグインを探しています。既存のJquery UIスライダは、1つの範囲の値セットのみをサポートします。私はあなたがmuliple範囲を持つことができるスライダーを探しています。そのため、内側の範囲の範囲、またはオーバーラップしない2つの範囲です。

例：

R =扱う

XX =スライダーバー

=または - =レンジハンドル

XXR1間------ R1XXXR2 - R2XXXXXXXXX

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

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

私はそこにこれを行うことができるスライダーがないと思いますか？私が行く前に確かめたいと思っていました。

Answer 1

ここで私はそれをしました。

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

それがより最適化することができますが、これはあなたに私はこの正確なニッチを埋めるためにElessarをリリースしてきた一般的な考え方

Answer 2

を与えるべきであることを確認イム。 colResizableは問題ありませんが、それは実際に仕事に適したツールではありません。