Foundation 滑块（Slider）详解（超级完整版，一次讲透）
我们继续你的 Foundation 系列，今天把 滑块（Slider）讲得明明白白！Foundation 6+ 的 Slider 是一个范围选择器（range slider），常用于价格筛选、音量调节、评分、日期范围等场景。支持单手柄、双手柄、垂直方向、显示当前值、步长等，键盘无障碍完美！
1. 基本单手柄滑块
<div class="slider" data-slider data-initial-start="50">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput1"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
<p>当前值: <span id="sliderOutput1"></span></p>2. 双手柄滑块（范围选择，最常用！）
<div class="slider" data-slider data-initial-start="25" data-initial-end="75" data-start="0" data-end="100">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
<span class="slider-fill" data-slider-fill></span>
<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
</div>3. 带步长 + 垂直滑块
<!-- 步长为10 -->
<div class="slider" data-slider data-step="10" data-initial-start="30">
<span class="slider-handle" data-slider-handle></span>
<span class="slider-fill" data-slider-fill></span>
</div>
<!-- 垂直方向 -->
<div class="slider vertical" style="height:200px;" data-slider data-vertical="true" data-initial-start="50">
<span class="slider-handle" data-slider-handle></span>
<span class="slider-fill" data-slider-fill></span>
</div>4. 显示当前值（实时更新）
用 aria-controls 绑定输出元素，Foundation 会自动更新。
5. 今天直接给你抄的完整代码（复制就能跑）
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation.min.css">
</head>
<body>
<h3>Foundation Slider 滑块全家福</h3>
<!-- 单手柄 + 显示值 -->
<div class="slider" data-slider data-initial-start="50">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="singleValue"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
<p>当前值: <strong id="singleValue">50</strong></p>
<!-- 双手柄范围滑块 -->
<div class="slider" data-slider data-initial-start="20" data-initial-end="80" style="margin-top:40px;">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="rangeStart"></span>
<span class="slider-fill" data-slider-fill></span>
<span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="rangeEnd"></span>
</div>
<p>范围: <strong id="rangeStart">20</strong> - <strong id="rangeEnd">80</strong></p>
<!-- 垂直滑块 -->
<div class="slider vertical" style="height:200px; display:inline-block; margin-left:50px;" data-slider data-vertical="true" data-initial-start="60">
<span class="slider-handle" data-slider-handle></span>
<span class="slider-fill" data-slider-fill></span>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="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”
“帮我做价格滑块”
“给我音量滑块”
我立刻给你写好！
