jquery 滑动价格区间
时间: 2023-12-30 09:23:48 浏览: 18
以下是使用jQuery实现滑动价格区间的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>滑动价格区间</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
#slider-range {
width: 300px;
margin: 20px;
}
#price-range {
margin: 20px;
}
</style>
<script>
$(function() {
var minPrice = 0;
var maxPrice = 1000;
var initialMinPrice = 200;
var initialMaxPrice = 800;
$("#slider-range").slider({
range: true,
min: minPrice,
max: maxPrice,
values: [initialMinPrice, initialMaxPrice],
slide: function(event, ui) {
$("#price-range").val("$" + ui.values[0] + " - $" + ui.values[1]);
}
});
$("#price-range").val("$" + initialMinPrice + " - $" + initialMaxPrice);
});
</script>
</head>
<body>
<div id="slider-range"></div>
<input type="text" id="price-range" readonly>
</body>
</html>
```
这段代码使用了jQuery UI库中的slider组件来实现滑动价格区间。通过设置`min`和`max`属性来定义价格的最小值和最大值,通过`values`属性来设置初始的价格区间。在滑动过程中,通过`slide`事件来更新显示价格区间的文本框。