鏈接多個Jquery滑塊

Question

如何更改一個Jquery滑塊的值以鏡像另一個滑塊的值。

即。如果我有一個範圍的滑塊，我想獲取最終值並將其用作另一個範圍滑塊的起始值。我也希望它們在變化時一起動畫，因此它們看起來像是鏈接在一起

Answer 1

如果您使用的是jQuery UI slider，則可以通過依賴滑動事件使一個滑塊鏡像另一個滑塊。

由於您在問題中提出了兩個問題，我們來處理第一個問題（相互鏡像的滑塊）。

首先，創建你的兩個滑塊，就像這樣。

$("#slider1").slider({ 
    min: 0, 
    max: 100, 
    slide: function(event, ui) { 
     // TODO - Respond to slide event. 
    } 
}); 

$("#slider2").slider({ 
    min: 0, 
    max: 100, 
    slide: function(event, ui) { 
     // TODO - Respond to slide event. 
    } 
}); 

並且，當然，添加適當的HTML。

<div id="slider1" style="width:100px"></div> 
<div id="slider2" style="width:100px"></div> 

這將設置您的滑塊。現在，您必須實施幻燈片事件，以便在更新滑塊時更新OTHER滑塊。現在要做到這一點。

$("#slider1").slider({ 
    min: 0, 
    max: 100, 
    slide: function(event, ui) { 
     $('#slider2').slider("option", "value", ui.value); 
    } 
}); 

$("#slider2").slider({ 
    min: 0, 
    max: 100, 
    slide: function(event, ui) { 
     $('#slider1').slider("option", "value", ui.value); 
    } 
}); 

注意在幻燈片函數中進行的工作。

至於你的問題的第二部分（取最終值並用它作爲另一個滑塊的起始值），你需要在最小值和最大值中設置它（使第二個開始在結尾第一個滑塊的最大值）。然後，唯一需要做的其他更改是將差異值添加到幻燈片函數中的ui.value。以下是您需要的JavaScript示例。

var diff = 100; 
$("#slider1").slider({ 
    min: diff - diff, 
    max: diff, 
    slide: function(event, ui) { 
     $("#amount1").val(ui.value); 
     $("#amount2").val(ui.value + diff); 
     $('#slider2').slider("option", "value", ui.value + diff); 
    } 
}); 
$("#amount1").val($("#slider1").slider("value")); 

$("#slider2").slider({ 
    min: diff, 
    max: diff + diff, 
    slide: function(event, ui) { 
     $("#amount1").val(ui.value - diff); 
     $("#amount2").val(ui.value); 
     $('#slider1').slider("option", "value", ui.value - diff); 
    } 
}); 
$("#amount2").val($("#slider2").slider("value")); 

您可以更改差異值以更改條形之間的差異。我還包含了當前值的顯示，以便您可以看到這確實有效。你可以在this jsFiddle example看到這個例子。希望這可以幫助你。