jQuery滑塊欄來選擇兩個依賴值

Question

我需要一些幫助，使滑塊或規模在jQuery中。有兩個值由滑塊確定。甜和鹽的量。他們將是滑塊上的一個按鈕來滑動。當滑塊上的30％的其他值應該是70％。即總和應該總是100％。

我怎麼能做出這樣的滑塊？我看過jQuery Slider插件，但它沒有這樣的選項。我也Google了它，但找不到這樣一個滑塊的例子。

Answer 1

jQuery UI的滑塊可以用來做這個

HTML：

<div id="slider"></div> 
Sweet:<div id="sweet">0</div> 
Salt:<div id="salt">100</div> 

JS：

$(function() { 
    $("#slider").slider({ 
     slide: function(event, ui) { 
      $('#sweet').text(ui.value); 
      $('#salt').text(100 - ui.value); 
     } 
    }); 
}); 

Fiddle

Answer 2

這裏是做這樣的事情（如果需要的話將創建一個例子）的一般方法：

1. 創建兩個滑塊。
2. 在jQuery中，訂閱兩個滑塊的「已更改」事件。
3. 如果一個滑塊更改，則將另一個滑塊的值設置爲100-thisSliderPercent。

因此，如果拖動一個，另一個響應。

Here是一個jsFiddle的例子。

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

<div id="slider1"></div><br/><div id="slider2"></div>