Javascript 滑块功能没有'；不算

我创建了两个滑块，其值介于100和1000之间。我现在正在努力解决的问题是如何将它们添加到另一个html输入中。我尝试了几件事，但都没有成功。以下是我到目前为止得到的信息：

html代码：

    <div class="box1">
    <input type="range"  min="100" max="1000" value="0" step="100" onmousemove="showValue1(this.value)"/>
    <p id="tbox1">
    <input type="text" id="value1">
</div>

<div class="box2">
    <input type="range" min="100" max="1000" value="0" step="100" onmousemove="showValue2(this.value)"/ onchange="updateInput(.value)">
    <p id="tbox2">
    <input type="text" id="value2">
</div>

<div class="box3">
    <input type="text" id="value3" value="0">
</div>

我要做的就是把两个滑块的值加在一起，让它正常工作。它现在不工作，因为我必须刷新页面以获得正确的值。我希望当我滑动滑块时，该值会以应有的方式更改

---

提前谢谢

这里有一些jQuery，但还有很多javascript。如果要加载jQuery，不妨使用它。无论如何，这里有一个工作脚本和一个：

HTML:

---

看起来您正在使用jquery ui。如果有一把小提琴能在你手上的地方演奏，人们会更容易回答这个问题。然后人们就可以摆弄它了。那时你可能会得到一大堆答案。

      var value11 = document.getElementById("value1").value;
var value22 =document.getElementById("value2").value;
var answerG = (+value11 + +value22)


function showValue1(newValue)
{
document.getElementById("value1").value=newValue;
}
function showValue2(newValue)
{
document.getElementById("value2").value=newValue;
}

$('#value3').val(answerG);
function updateInput(answerG){
    document.getElementById("value3").value = answerG;
}

<div class="box1">
    <input  id="1" type="range"  min="100" max="1000" value="0" step="100" value="100" />
    <p id="tbox1"></p>
    <input type="text" id="value1">
</div>

<div class="box2">
    <input id="2" type="range" min="100" max="1000" value="0" step="100" value="100" />
    <p id="tbox2"></p>
    <input type="text" id="value2">
</div>

<div class="box3">
    <input type="text" id="value3" value="0">
</div>

$(document).ready(function(){
    $("[type=range]").change(function(){
        $(this).siblings("input").val($(this).val());
        $("#value3").val(+$("#1").val() + +$("#2").val());
    });
});