这是我的jquery uy滑块的代码：
var slidervalue = 100;
$(function () {
$( "#slider" ).slider({
range: "min",
value: 100,
min: 1,
max: 700,
slide: function( event, ui ) {
$( "#amount" ).val(ui.value );
slidervalue = ui.value;
}
});
$( "#amount" ).val( $( "#slider" ).slider( "value" ) );
});
这是我创建的额外函数，用于从我的交易标题中获取一个数字并计算节省并显示结果。
function updateSlider() {
$.each($('.coupontitle'),function(index,coupObj){
if ($(coupObj).text().match(/('d+)'%/i))
{
var percent = $(coupObj).text().match(/('d+)'%/i);
var savings = ((percent[1]*.01) * slidervalue).toFixed(0);
$('span',coupObj).html('Save: $'+savings);
}
else if ($(coupObj).text().match(/'$('d+)/i))
{
var percent = $(coupObj).text().match(/'$('d+)/i);
var savings = ((percent[1]*.01) * 100).toFixed(0);
$('span',coupObj).html('Save: $'+savings);
}
});
}
此代码与滑块一起正常工作。 现在，当用户滑动滑块时，与滑块对应的金额使用 UI.value 传递，并传递给上述函数并计算。
但是，当我手动在文本框中输入值时，我希望滑块自动移动，并且我希望该值传递到函数中进行计算。现在，当手动输入金额时，输入值不会传递到函数中。
我希望滑块可以作为此站点工作：http://www.chippmunk.com/
我遇到了这个 jsfiddle，它可以完成工作，但是当手动输入时，它不会将文本框值传递到我的函数中以继续进行计算。
JSFIDDLE - http://jsfiddle.net/andrewwhitaker/MD3mX/
上面接受的答案非常有用，适用于单值滑块。但是像我这样的人可能想知道如何在范围滑块中控制两个值。因此，如果我们使用范围滑块，我们需要将数组作为值传递，对于范围滑块，我们可以像这样处理它
var min_val = 0;
var max_val = 1000;
function minMaxControl(type) {
if (type == 'min') {
min_val = $('#min').val();
} else if (type == 'max') {
max_val = $('#max').val();
}
$("#slider-range").slider('values', [min_val, max_val]);
}
$("#slider-range").slider({
range: true,
min: 0,
max: 1000,
values: [min_val, max_val],
slide: function(event, ui) {
$("#min").val(ui.values[0]);
$("#max").val(ui.values[1]);
}
});
您可以在此处查看完整的代码和演示。 https://jsfiddle.net/N4K1B/2tv9phke/1/
所以基本上在上面的答案中，滑块的单个参数是这样控制的：
$("#slider").slider("value",this.value);
对于范围滑块，我们传递的不是传递单个值，而是传递一个包含两个值的数组，如下所示：
$("#slider-range").slider('values', [min_val, max_val]);
如果有人仍在使用 jquery-ui 滑块，希望这个答案可以帮助某人。有关更多信息，请参阅文档
这将起作用，不过我会将 $-sign 移出输入。
http://jsfiddle.net/Rusln/MD3mX/847/
$("#slider").slider({
range: "min",
value: 1,
step: 1000,
min: 0,
max: 5000000,
slide: function (event, ui) {
$("input").val(ui.value);
}
});
$("input").change(function () {
$("#slider").slider("value",this.value);
});
更新
http://jsfiddle.net/Rusln/KLj6Z/
$("#slider").slider({
range: "min",
value: 1,
step: 1,
min: 0,
max: 100,
slide: function (event, ui) {
$("input").val(ui.value);
}
});
$("input").on("keyup",function(e){
$("#slider").slider("value",this.value);
});