Foundation 滑块
Foundation 滑块（Slider）用于在一定范围内选择数值。本章将介绍滑块的各种用法。
基本滑块
html
<div class="slider" data-slider data-initial-start="50">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
<span class="slider-fill" data-slider-fill></span>
</div>带输入框的滑块
html
<div class="grid-x grid-padding-x">
<div class="cell small-10">
<div class="slider" data-slider data-initial-start="50">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
</div>
<div class="cell small-2">
<input type="number" id="sliderOutput">
</div>
</div>双滑块（范围选择）
html
<div class="slider" data-slider data-initial-start="25" data-initial-end="75">
<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>垂直滑块
html
<div class="slider vertical" data-slider data-initial-start="50" data-vertical="true" style="height: 200px;">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
<span class="slider-fill" data-slider-fill></span>
</div>配置选项
html
<div class="slider" data-slider
data-initial-start="50"
data-start="0"
data-end="100"
data-step="5"
data-decimal="0">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
<span class="slider-fill" data-slider-fill></span>
</div>| 选项 | 说明 | 默认值 |
|---|---|---|
data-initial-start | 初始值 | 0 |
data-start | 最小值 | 0 |
data-end | 最大值 | 100 |
data-step | 步进值 | 1 |
data-decimal | 小数位数 | 2 |
data-vertical | 垂直方向 | false |
自定义样式
html
<style>
.slider.success .slider-fill { background: #3adb76; }
.slider.success .slider-handle { background: #3adb76; }
.slider.warning .slider-fill { background: #ffae00; }
.slider.warning .slider-handle { background: #ffae00; }
.slider.alert .slider-fill { background: #cc4b37; }
.slider.alert .slider-handle { background: #cc4b37; }
</style>JavaScript API
javascript
// 获取滑块值
var slider = new Foundation.Slider($('#mySlider'));
var value = $('#mySlider').attr('data-slider');
// 监听变化
$('#mySlider').on('moved.zf.slider', function() {
console.log('滑块值:', $(this).attr('data-slider'));
});完整示例
html
<!DOCTYPE html>
<html class="no-js" lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation 滑块示例</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
<style>
.demo-section { margin-bottom: 40px; padding: 20px; background: #f8f8f8; }
.demo-section h3 { margin-bottom: 20px; }
.slider.success .slider-fill, .slider.success .slider-handle { background: #3adb76; }
.slider.warning .slider-fill, .slider.warning .slider-handle { background: #ffae00; }
.slider.alert .slider-fill, .slider.alert .slider-handle { background: #cc4b37; }
</style>
</head>
<body>
<div class="grid-container">
<h1>Foundation 滑块展示</h1>
<div class="demo-section">
<h3>基本滑块</h3>
<div class="slider" data-slider data-initial-start="50">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
</div>
<div class="demo-section">
<h3>带输入框的滑块</h3>
<div class="grid-x grid-padding-x">
<div class="cell small-10">
<div class="slider" data-slider data-initial-start="50">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="output1"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
</div>
<div class="cell small-2">
<input type="number" id="output1">
</div>
</div>
</div>
<div class="demo-section">
<h3>范围滑块</h3>
<div class="grid-x grid-padding-x">
<div class="cell small-2">
<input type="number" id="rangeStart">
</div>
<div class="cell small-8">
<div class="slider" data-slider data-initial-start="20" data-initial-end="80">
<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>
</div>
<div class="cell small-2">
<input type="number" id="rangeEnd">
</div>
</div>
</div>
<div class="demo-section">
<h3>自定义颜色</h3>
<label>Success</label>
<div class="slider success" data-slider data-initial-start="70">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
<label>Warning</label>
<div class="slider warning" data-slider data-initial-start="50">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
<label>Alert</label>
<div class="slider alert" data-slider data-initial-start="30">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
</div>
<div class="demo-section">
<h3>步进滑块</h3>
<p>步进值：10</p>
<div class="grid-x grid-padding-x">
<div class="cell small-10">
<div class="slider" data-slider data-initial-start="50" data-step="10">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="stepOutput"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
</div>
<div class="cell small-2">
<input type="number" id="stepOutput">
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
<script>$(document).foundation();</script>
</body>
</html>总结
本章我们学习了基本滑块、范围滑块、垂直滑块和自定义样式。
下一章，我们将学习 Foundation 提示框。