Foundation 滑块
Foundation 滑块（Slider）详解（超级完整版，一次讲透）
我们继续你的 Foundation 系列，今天把滑块（Slider）讲得明明白白！Foundation 6+ 的 Slider 是一个范围选择器（range slider），常用于价格筛选、音量调节、评分、日期范围等场景。支持单手柄、双手柄、垂直方向、显示当前值、步长等，键盘无障碍完美！
1. 基本单手柄滑块
<divclass="slider"data-sliderdata-initial-start="50"><spanclass="slider-handle"data-slider-handlerole="slider"tabindex="1"aria-controls="sliderOutput1"></span><spanclass="slider-fill"data-slider-fill></span></div><p>当前值:<spanid="sliderOutput1"></span></p>2. 双手柄滑块（范围选择，最常用！）
<divclass="slider"data-sliderdata-initial-start="25"data-initial-end="75"data-start="0"data-end="100"><spanclass="slider-handle"data-slider-handlerole="slider"tabindex="1"></span><spanclass="slider-fill"data-slider-fill></span><spanclass="slider-handle"data-slider-handlerole="slider"tabindex="1"></span></div>3. 带步长 + 垂直滑块
<!-- 步长为10 --><divclass="slider"data-sliderdata-step="10"data-initial-start="30"><spanclass="slider-handle"data-slider-handle></span><spanclass="slider-fill"data-slider-fill></span></div><!-- 垂直方向 --><divclass="slider vertical"style="height:200px;"data-sliderdata-vertical="true"data-initial-start="50"><spanclass="slider-handle"data-slider-handle></span><spanclass="slider-fill"data-slider-fill></span></div>4. 显示当前值（实时更新）
用aria-controls绑定输出元素，Foundation 会自动更新。
5. 今天直接给你抄的完整代码（复制就能跑）
<!DOCTYPEhtml><html><head><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation.min.css"></head><body><h3>Foundation Slider 滑块全家福</h3><!-- 单手柄 + 显示值 --><divclass="slider"data-sliderdata-initial-start="50"><spanclass="slider-handle"data-slider-handlerole="slider"tabindex="1"aria-controls="singleValue"></span><spanclass="slider-fill"data-slider-fill></span></div><p>当前值:<strongid="singleValue">50</strong></p><!-- 双手柄范围滑块 --><divclass="slider"data-sliderdata-initial-start="20"data-initial-end="80"style="margin-top:40px;"><spanclass="slider-handle"data-slider-handlerole="slider"tabindex="1"aria-controls="rangeStart"></span><spanclass="slider-fill"data-slider-fill></span><spanclass="slider-handle"data-slider-handlerole="slider"tabindex="1"aria-controls="rangeEnd"></span></div><p>范围:<strongid="rangeStart">20</strong>-<strongid="rangeEnd">80</strong></p><!-- 垂直滑块 --><divclass="slider vertical"style="height:200px;display:inline-block;margin-left:50px;"data-sliderdata-vertical="true"data-initial-start="60"><spanclass="slider-handle"data-slider-handle></span><spanclass="slider-fill"data-slider-fill></span></div><scriptsrc="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/js/foundation.min.js"></script><script>$(document).foundation();</script></body></html>下面给你看真实效果（官方文档和演示中最标准的 Foundation Slider 示例）：
官方文档（最新版）：https://get.foundation/sites/docs/slider.html
你现在想干嘛？
→ 明天终于讲 Foundation 表格（Table）？
→ 帮我做一个价格范围筛选滑块（¥0 - ¥1000，带实时显示）？
→ 给我一个垂直音量滑块代码？
直接回复下一句：
“明天讲 table”
“帮我做价格滑块”
“给我音量滑块”
我立刻给你写好！