具有相反值的Jquery UI滑塊？

Question

首先，我是jquery首發，所以請不要爲我缺乏知識而生氣。

我試圖建立一個jQuery的滑塊，有它在其寬度的確切一半開關，並與滑塊，以特定的方式工作值兩個輸入：

如果移動滑塊切換到左側，#first輸入中的值遞減，#second中的值遞增。對於右側它扭轉局面。所以如果我移動滑塊向右和#second箱變（例如）值30，#first獲得價值70

我希望你明白我的需要..

直到現在我已經設法在滑塊和#first投入中獲得開關會從滑塊

價值，我不知道如何從這裏

您可以查看和修改情況搬到這裏：http://jsfiddle.net/M8AWg/

HTML：

<div class="container"> 
    <input type="text" id="first"/> 
    <input type="text" id="second"/> 
    <div id="slider"></div> 
</div> 

JS：

$('#first, #second').val('50'); 

$(function() { 
    $("#slider").slider(
    { value: 50, 
     slide: function(event, ui) { 
      $("#first").val(ui.value); 
      $(ui.value).val($('#first').val()); 
      }  
     } 
    ); 
    }); 

Answer 1

是總總是100？如果是的話你可以加入這一行：

$("#second").val(100 - ui.value); 

在這裏看到：

http://jsfiddle.net/M8AWg/1/

Answer 2

從滑塊使用的價值，減去100，讓您的其餘部分。 也$(ui.value)要尋找$(30)不存在

$(function() { 
    $("#slider").slider(
    { value: 50, 
     slide: function(event, ui) { 
      $("#first").val(ui.value); 
      $('#second').val(100-ui.value); 
      }  
     } 
    ); 
    }); 

fiddle