我想使用 jQuery 创建一个 slider ，允许选择两个不同的值。老实说，我不知道从哪里开始。
我希望它在两侧显示正值，但返回两个值。
例如:
500----------0----------500
如果 slider 向左侧移动，则返回“amount1”。如果向右移动，则返回“amount2”。两个数字都将为正数。我已经对此进行了几个小时的尝试，但没有成功。
这是我正在使用的示例代码。这可能吗？
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#slider" ).slider({
value:0,
min: 500,
max: 500,
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.value );
}
});
$( "#amount1" ).val( "$" + $( "#slider" ).slider( "value" ) );
});
</script>
</head>
<body>
<p>
<label for="amount">Amount</label>
<input type="text" id="amount1" style="border: 0; color: #f6931f; font-weight: bold;" />
<input type="text" id="amount2" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
感谢您的任何意见!
最佳答案
我会这样处理:
$(function() {
$( "#slider" ).slider({
value:0,
min: -500,
max: 500,
slide: function( event, ui ) {
if (ui.value > 0){
$( "#amount1" ).val( "$" + ui.value );
}else{
//multiply by -1 to make positive
$( "#amount2" ).val( "$" + parseInt(ui.value * -1));
}
}
});
});
希望这对您有所帮助，如果您有任何疑问，请告诉我!
<小时/> 编辑:这是一个清理版本。
感谢 mrtsherman 和 Doorknob 的贡献!
$(function () {
$("#slider").slider({
value: 0,
min: -500,
max: 500,
step: 10,
slide: function (event, ui) {
if (ui.value > 0) {
$("#amount2").val("$" + ui.value);
$("#amount1").val("");
} else {
//multiply by -1 to make positive
$("#amount1").val("$" + parseInt(ui.value * -1));
$("#amount2").val("");
}
}
});
});
关于jquery - 一个 slider 返回两个值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14794256/