我设置了一个 jQuery UI 范围滑块。当滑块控件移动时,我的代码将较低范围值插入隐藏输入,并将较高范围值插入隐藏输入。这些值随着滑块的移动而不断变化,但有一个问题。例如,如果较低的值停在 60,000 英镑,则插入隐藏 div 的值将是 40,000 英镑。它始终是 1 个位置不同步。这是我需要解决的第一个问题。这些值在我的代码中设置为#minPrice 和#maxPrice。
第二个问题发生在表单提交上。我需要获取隐藏输入的值并(在表单提交后的页面加载上)将它们传递回显示滑块范围的文本输入,例如 40,000 到 60,000。此输入在代码中具有 #amount 的 ID。
这是我的代码:
// Set increments for sale slider prices
var increments = ['0', '20,000', '40,000', '60,000', '80,000', '100,000', '120,000', '140,000', '160,000', '180,000', '200,000', '220,000', '240,000', '260,000', '280,000', '300,000', '320,000', '340,000', '360,000', '380,000', '400,000', '420,000', '440,000', '460,000', '480,000', '500,000', '520,000', '540,000', '560,000', '580,000', '600,000', '620,000', '640,000', '660,000', '680,000', '700,000', '720,000', '740,000', '760,000', '780,000', '800,000', '820,000', '840,000', '860,000', '880,000', '900,000', '920,000', '940,000', '960,000', '980,000', '1,000,000', '1,100,000', '1,200,000', '1,300,000', '1,400,000', '1,500,000', '1,600,000', '1,700,000', '1,800,000', '2,000,000']
$('#sliderPriceSale').slider({
range: true,
min: 0,
step: 1,
max: 59,
values: [4, 15],
slide: function (event, ui) {
$('#amount').val(increments[ui.values[0]] + " to " + increments[ui.values[1]]);
var minPrice = $("#sliderPriceSale").slider("values", 0);
$('#minPrice').val(increments[minPrice]);
var maxPrice = $("#sliderPriceSale").slider("values", 1);
$('#maxPrice').val(increments[maxPrice]);
}
});
$('#amount').val(increments[$('#sliderPriceSale').slider("values", 0)] + " to " + increments[$('#sliderPriceSale').slider("values", 1)]);
任何帮助都感激不尽。