2013-04-27 65 views
2

我试图链接两个jQuery UI滑块,因此它们将合计达到100%。我在这里找到了三个滑块的完美解决方案,但由于某些原因,我无法在修改此jsFiddle示例以删除第三个滑块时正确合计数学:http://jsfiddle.net/gWbMp/3/两个链接的jQuery滑块添加高达100%

任何人都可以帮助我分出这只是包括两个滑块而不是三个?

这里的(接近)的javascript我已经结束了,但它并不完全正确:

var min = 0; 
var max = 100; 
$("input").change(function(){ 
console.log("a"); 
    var index = $(this).attr('class').substring(0,1); 
    $("#slider_"+ index).slider('value', this.value); 
    refreshSliders(index - 0); 
}); 
$('.selector').slider({ 
    animate : true 
}, { 
    min : min 
}, { 
    max : max 
}, { 
    change : function(event, ui) { 
     totalvalue = $("#slider_1").slider("value") + $("#slider_2").slider("value"); 
     $('.1percent').val($("#slider_1").slider("value")); 
     $('.2percent').val($("#slider_2").slider("value")); 

    } 
}, { 
    slide : function(event, ui) { 
     $('.1percent').val($("#slider_1").slider("value")); 
     $('.2percent').val($("#slider_2").slider("value")); 

    } 
}); 

$("#slider_1").slider('value', 10); 
$("#slider_2").slider('value', 90); 

$('.1percent').val($("#slider_1").slider("value")); 
$('.2percent').val($("#slider_2").slider("value")); 

function refreshSliders(slidermainin) { 
    var value1 = $("#slider_1").slider("option", "value"); 
    var value2 = $("#slider_2").slider("option", "value"); 
    var valuechange = (value1 + value2) - 100; 
    var valuemain = 0, valueother1 = 0; 

    switch(slidermainin) { 
     case 1: 
      slidermain = "#slider_1"; 
      sliderother1 = "#slider_2"; 
      valuemain = value1; 
      valueother1 = value2; 
      break; 
     case 2: 
      slidermain = "#slider_2"; 
      sliderother1 = "#slider_1"; 
      valuemain = value2; 
      valueother1 = value1; 
      break; 
    } 

    if (valueother1 === 0) { 
     if (valueother1 === 0) { 
      if (valuechange <= 0) { 
       $(sliderother1).slider('value', valueother1 - (valuechange/2)); 
      } 
     } else { 
      if (valuechange <= 0) { 
       $(sliderother1).slider('value', valueother1 - (valuechange/2)); 
      } else { 
       $(sliderother1).slider('value', valueother1 - valuechange); 
      } 
     } 
    } else { 
     $(sliderother1).slider('value', valueother1 - (valuechange/2)); 
    } 
} 

var bindSliders = function(selector, value) { 
    $(selector).bind("slidechange slide", function(event, ui) { 
     event.originalEvent && (event.originalEvent.type == 'mousemove' || event.originalEvent.type == 'mouseup' || event.originalEvent.type == 'keydown') && refreshSliders(value); 
    }); 
}; 

bindSliders("#slider_1", 1); 
bindSliders("#slider_2", 2); 

回答

2

我认为这可以为两个滑块

做短得多

你可以重写refreshSliders功能计算最大值 的基础上,第二个值并直接调用它滑“变”与“滑动”(甚至只是第二个)

function refreshSliders(thisSlider, ui){  
var thisNum = $(thisSlider).attr("id").replace("slider_", ""); 
var otherNum = (thisNum==1)?2:1; 
$('.'+thisNum+'percent').val(ui.value); 
if ($("#slider_"+otherNum).slider("value")!=max-ui.value){    
     $("#slider_"+otherNum).slider("value", max-ui.value); 
     $('.'+otherNum+'percent').val(max-ui.value); 
}  
} 

看看这jsfiddle,我把它从原来的一个调整了一下:http://jsfiddle.net/paulitto/fBxCm/1/

+0

非常好,感谢您的帮助! – benadamson 2013-04-27 17:09:37

+0

你好Paulitto,很好的解决方案。我有一个类似的问题,但三个滑块。你可以帮我吗。问题在这里http://stackoverflow.com/questions/30962396/jquery-ui-multiple-linked-range-sliders-with-sum-of-1 – wondie 2015-06-22 11:48:20