我一直在寻找一个支持多个远程句柄的Jquery UI滑块。现有的Jquery UI滑块仅支持一组范围的值。我正在寻找一个你可以拥有多个范围的滑块。因此,内部范围或两个范围不重叠的范围。
示例:
R =句柄
XX =滑块
=或 - =句柄之间的范围
XXR1 ------ R1XXXR2 - R2XXXXXXXXX
XXXR1 ---- R2 ==== R2 ----- R1XXXXXX
XXXR1 - R2 === R2 R3 ---- === R3 - R1XXXX
我不认为那里有滑块可以做到这一点?只是想在我去写一个之前确定一下。
答案 0 :(得分:9)
我刚刚发布Elessar来填补这个确切的位置。 colResizable很好,但它并不是真正适合这项工作的工具。
答案 1 :(得分:4)
我是这样做的。
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>');
}
});
});
我相信它可以进行更多优化,但这应该会给你一般的想法