jQuery UI 实例 - 滑块（Slider）
jQuery UI Slider（滑块）实例
Slider是 jQuery UI 中用于选择数值或范围的交互组件，常用于音量调节、价格筛选、时间选择、颜色调整等场景。支持单手柄、范围选择（双柄）、垂直方向、步长、动画等。
官方演示地址：https://jqueryui.com/slider/
下面提供几个渐进实例，从基础到高级，代码使用最新 CDN，可直接复制到 HTML 文件测试。
1.基础单手柄滑块
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>jQuery UI Slider 基础示例</title><linkrel="stylesheet"href="//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css"><scriptsrc="//code.jquery.com/jquery-3.6.0.min.js"></script><scriptsrc="//code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script></head><body><divid="slider"></div><p>当前值:<spanid="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.范围选择滑块（双柄）
常用于价格区间筛选。
<divid="range-slider"></div><p>范围:<spanid="min">200</span>-<spanid="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）
<divid="vertical-slider"style="height:200px;"></div><p>值:<spanid="v-value">30</span></p><script>$("#vertical-slider").slider({orientation:"vertical",// 垂直方向min:0,max:100,value:30,step:10,// 步长为10slide:function(event,ui){$("#v-value").text(ui.value);}});</script>4.多手柄 + 事件监听
支持多个手柄（values 数组长度决定）。
<divid="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 插件）的版本，请告诉我更多需求！