支持“多个手柄”的Jquery滑块插件

我一直在寻找一个支持多个远程句柄的Jquery UI滑块。 现有的Jquery UI滑块仅支持一组范围的值。 我正在寻找一个你可以拥有多个范围的滑块。 因此，具有内部范围或两个范围的范围不重叠。

例：

R =句柄

XX =滑块

=或 – =句柄之间的范围

XXR1 —— R1XXXR2 – R2XXXXXXXXX

XXXR1 —- R2 ==== R2 —– R1XXXXXX

XXXR1 – R2 === R2 R3 —- === R3 – R1XXXX

我不认为有一个滑块可以做到这一点？ 只是想在我去写一个之前确定一下。

Answer 1

我刚刚发布Elessar来填补这个确切的利基市场。 colResizable很好，但它并不是真正适合这项工作的工具。

Answer 2

这是我如何做到的。

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('
'); $(this).append('
'); $(this).append('
'); $(this).append('
'); } }); }); 

我相信它可以更优化，但这应该给你一般的想法