兩個鏈接的jQuery滑塊添加高達100％

我試圖鏈接兩個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);

來源

2013-04-27 benadamson

我認爲這可以爲兩個滑塊

做短得多

你可以重寫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/

來源

2013-04-27 10:37:41 paulitto

非常好，感謝您的幫助！ – benadamson 2013-04-27 17:09:37

你好Paulitto，很好的解決方案。我有一個類似的問題，但三個滑塊。你可以幫我嗎。問題在這裏http://stackoverflow.com/questions/30962396/jquery-ui-multiple-linked-range-sliders-with-sum-of-1 – wondie 2015-06-22 11:48:20

兩個鏈接的jQuery滑塊添加高達100％

回答

相關問題