我使用 jQuery UI slider 来设置文本框中的值。我希望这可以双向工作，因此，如果在文本框中放置一个值，我希望 slider 移动到相关位置。
不过，我不确定最佳解决方案。
我有以下标记:
<label for="amount-depoist">Deposit Amount (£):</label>
<input type="text" id="amount-deposit" >
<div id="slider-deposit"></div>
以及以下 jQuery:
jQuery( document ).ready(function( $ ) {
$( "#slider-deposit" ).slider({
range: "min",
value: 100,
min: 0.1,
max: 0.7,
step: 1,
slide: function( event, ui ) {
$( "#amount-deposit" ).val(Number(ui.value).toFixed(2));
totalPayableFunc();
monthlyPaymentsFunc();
}
});
$( "#amount-deposit" ).val(Number($( "#slider-deposit" ).slider( "value" )).toFixed(2));
totalPayableFunc();
monthlyPaymentsFunc();
});
当前 slider 上的slide: function 某些函数被称为“做数学”，并且在amount-deposit 文本输入字段中设置一个值。我希望此文本输入字段可编辑，以便在 keyup 上 slider 将滑动到相关位置。我不确定如何实现这一目标，有人可以提供一些建议吗？
我这里有一个 JS fiddle :https://jsfiddle.net/liamrfell/nzzb8nad/1/
最佳答案
从概念上讲，您已经知道需要做什么。 在keyup事件中，您需要获取输入框中的值，并将该值放入 slider 中。您要查找的函数是 $( "#slider").slider( "option", "value", valueVariable )
HTML:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<body>
<label>InputBox:</label>
<input type="number" id="inputbox" />
<br>
<br>
<div id="slider"></div>
</body>
JS:
$(document).ready(function(){
$("#inputbox").val(50);
$( "#slider" ).slider({
range: "min",
value: 50,
min: 1,
max: 100,
step: 1,
slide: function( event, ui ) {
var value = $( "#slider" ).slider( "option", "value" );
//on slide update inputbox
$('#inputbox').val(value);
//whatever other tasks you need to do.
}
});
$("#inputbox").keyup( function(){
//whatever other tasks you need to do.
$( "#slider" ).slider( "option", "value", parseInt($(this).val()) );
//whatever other tasks you need to do.
});
});
Codepen链接:http://codepen.io/anon/pen/bExger
关于javascript - jQuery UI slider (从文本输入设置)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35186991/