jquery滑块数量更新必须点击两次？

Question

我做错了什么？

我必须移动滑块并单击该行两次才能获得一个值！

我有一个滑块 - 该值显示在滑块上方。然后它乘以 5，然后显示在滑块下方。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<link type="text/css"href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<script>    
$(document).ready(function(){ 
function updateAmounts() {  
var value1 = $('#slider1').slider('value');  
$('#amount1').val(value1);  
var ude1 = 5 * value1;
$('#ude2').val(ude1);
}

$('#slider1').slider({value: 0, min: 0, max: 200, step: 1, slide: function(event, ui) {
    updateAmounts();
}});

updateAmounts();
});
</script>

</head>
<body>

<p>
<label for='amount1'>Value:</label>
<input type='number' id='amount1' name='amount1' style='border:0; color:#0072a7; font-weight:bold;' />
</p>

<div id='slider1'></div>

<input class="input" size="4" type="text" id="ude2" name="ude2" style="border:0; background:transparent; color:#000000; font-weight:bold; font-size:2.7em;" />

</body>
</html>

Answer 1

JQuery:

$('#slider').slider({value: 10, min: 0, max: 200, step: 1, slide: function(event, ui) {

$('#amount1').val(ui.value); 
$('#ude2').val(ui.value * 5);
}});

HTML:

<p>
<label for='amount1'>Value:</label>
<input type='text' id='amount1' name='amount1' style='border:0; color:#0072a7; font-weight:bold;' />
</p>

<div id='slider'></div>

<input class="input" size="4" type="text" id="ude2" name="ude2" style="border:0; background:transparent; color:#000000; font-weight:bold; font-size:2.7em;" />

参考：http://jsfiddle.net/srxt8egc/

jquery滑块数量更新必须点击两次？

jquery slider amount update have to click two times?

mobile

jquery