我在 php 搜索表单中添加了一个价格范围滑块,并使用 Prototype。这是表单代码:
<input type="text" name="pmin" id="pmin" value="0" onkeypress="return isNumberKey(event)"
/>
<input type="text" name="pmax" id="pmax" value="500" onkeypress="return isNumberKey(event)"
/>
<div id="price-range" class="filter-track"> <span id="pminx" class="filter-handle" title="Scroll to set minimum value"></span>
<span
id="pmaxx" class="filter-handle" title="Scroll to set maximum value"></span>
</div>
这是处理滑块的javascript代码:
<script>
var loadPriceSlider = function () {
var handles = [$('pminx'), $('pmaxx')];
// horizontal slider control with preset values
priceRange = new Control.Slider(handles, 'price-range', {
range: $R(0, 500, false),
sliderValue: [0, 500],
values: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 250, 260, 270, 280, 290, 300, 310, 320, 330, 340, 350, 360, 370, 380, 390, 400, 410, 420, 430, 440, 450, 460, 470, 480, 490, 500],
restricted: true,
onSlide: function (v) {
$('pmin').value = ((v[0] != null) ? v[0] : 0);
$('pmax').value = ((v[1] != null) ? v[1] : 0);
},
onChange: function (v) {
if (v.length > 0) {
$('pmin').value = ((v[0] != null) ? v[0] : 0);
$('pmax').value = ((v[1] != null) ? v[1] : 0);
}
}
});
};
loadPriceSlider();
</script>
我需要在搜索结果页面中显示用户所做的选择。目前该表单有效,如果用户在此价格滑块上进行一些选择,则会显示正确的结果,但输入会将最小值和最大值显示为 0 和 500,即默认值。