jQuery UI Slider（滑块）实例
Slider 是 jQuery UI 中用于选择数值或范围的交互组件，常用于音量调节、价格筛选、时间选择、颜色调整等场景。支持单手柄、范围选择（双柄）、垂直方向、步长、动画等。
官方演示地址：https://jqueryui.com/slider/
下面提供几个渐进实例，从基础到高级，代码使用最新 CDN，可直接复制到 HTML 文件测试。
1. 基础单手柄滑块
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Slider 基础示例</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
</head>
<body>
<div id="slider"></div>
<p>当前值: <span id="value">50</span></p>
<script>
$(function() {
$("#slider").slider({
min: 0,
max: 100,
value: 50,
slide: function(event, ui) { // 拖动时实时更新
$("#value").text(ui.value);
}
});
});
</script>
</body>
</html>2. 范围选择滑块（双柄）
常用于价格区间筛选。
<div id="range-slider"></div>
<p>范围: <span id="min">200</span> - <span id="max">800</span></p>
<script>
$("#range-slider").slider({
range: true, // 启用范围模式
min: 0,
max: 1000,
values: [200, 800], // 初始值数组
slide: function(event, ui) {
$("#min").text(ui.values[0]);
$("#max").text(ui.values[1]);
}
});
</script>3. 垂直滑块 + 步长（step）
<div id="vertical-slider" style="height: 200px;"></div>
<p>值: <span id="v-value">30</span></p>
<script>
$("#vertical-slider").slider({
orientation: "vertical", // 垂直方向
min: 0,
max: 100,
value: 30,
step: 10, // 步长为10
slide: function(event, ui) {
$("#v-value").text(ui.value);
}
});
</script>4. 多手柄 + 事件监听
支持多个手柄（values 数组长度决定）。
<div id="multi-slider"></div>
<script>
$("#multi-slider").slider({
range: true,
min: 0,
max: 100,
values: [20, 40, 70], // 三个手柄
create: function() { console.log("创建完成"); },
start: function() { console.log("开始拖动"); },
change: function(event, ui) { // 值变化结束时（包括程序设置）
console.log("新值:", ui.values);
}
});
</script>小技巧：
- 动态设置值：
$("#slider").slider("value", 80); - 获取值：
$("#slider").slider("value");或范围$("#slider").slider("values"); - 动画：
animate: true - 自定义样式：通过 CSS 修改
.ui-slider-handle和.ui-slider-range
Slider 常用于表单过滤、音视频控制、颜色选择器（RGB 三滑块）。如果你需要 价格筛选完整示例、与输入框同步、或 带刻度标签（需 slider-pips 插件） 的版本，请告诉我更多需求！
