Foundation 滑块 - 学习 Foundation 5 - 简单教程，简单编程

滑块允许用户通过拖动来选取区间值

使用 <div class="range-slider" data-slider> 创建滑块

在 <div> 内, 添加两个 <span> 元素

<span class="range-slider-handle"> 创建矩形滑块（蓝色背景）
<span class="range-slider-active-segment"> 是在滑块后的灰色横条，是滑块拖动区域

需要注意的是滑块需要初始化 Foundation JS

<div class="range-slider" data-slider>
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
</div>
<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {$(document).foundation();})
</script>

运行范例 »

圆角滑块

.radius CSS 类可以创建一个圆角滑块

<div class="range-slider" data-slider>..</div>
<div class="range-slider radius" data-slider>...</div>

运行范例 »

圆形滑块

.round CSS 类可以创建一个圆形滑块

<div class="range-slider" data-slider>..</div>
<div class="range-slider round" data-slider>...</div>

运行范例 »

禁用滑块

.disabled CSS 类可以禁用滑块

<div class="range-slider" data-slider>..</div>
<div class="range-slider disabled" data-slider>...</div>

运行范例 »

垂直滑块

.vertical-range CSS 类和 data-options="vertical: true;" 可以创建垂直滑块

<div class="range-slider vertical-range" data-slider 
    data-options="vertical:true;">
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
</div>

运行范例 »

滑块值

默认情况下，滑块放在横条的中间 (数值为 "50")

可以添加 data-options="initial: **num** " 属性来修改默认值

<div class="range-slider" data-slider data-options="initial: 80;">
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
</div>

运行范例 »

显示滑块值

通过在 <div> 中添加data-options="display_selector:# **id** " 属性可以在滑块拖动时实时显示值

需要注意的是：元素 id 值与滑块的 id 相同

<span id="mySlider"></span>
<div class="range-slider" data-slider 
    data-options="display_selector: #mySlider;">
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
</div>

运行范例»

组合数据选项

使用 display_selector 和 initial CSS 类来设置数据选项

<span id="mySlider"></span>
<div class="range-slider" data-slider 
    data-options="display_selector: #mySlider; initial: 20;">
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
</div>

运行范例 »

步长

默认情况下，滑块滑动的增加减少的数量为 "1"

可以添加 data-options="step: **num** ;" 属性来修改步长值

<span id="mySlider"></span>
<div class="range-slider" data-slider 
    data-options="display_selector: #mySlider; step: 25;">
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
</div>

运行范例 »

自定义区间

默认情况下，区间值在 "0" 到 "100"

可以添加 data-options start 和 end 来设置区间值

<span id="mySlider"></span>
<div class="range-slider" data-slider 
    data-options="display_selector: #mySlider; start: 1; end: 20;">
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
</div>

运行范例 »

使用网格

在网格中使用滑块

<div class="row">
    <div class="small-10 columns">    
        <div class="range-slider" data-slider 
            data-options="display_selector:#mySlider;">
            <span class="range-slider-handle"></span>
            <span class="range-slider-active-segment"></span>
        </div>  
    </div>
    <div class="small-2 columns">
        <span id="mySlider" style="display:block;margin-top:14px;"></span> 
    </div>
</div>

运行范例 »

使用 Input

可以使用 <input> 取代 <span> 来显示滑块的值

<div class="row">
    <div class="small-10 columns">    
        <div class="range-slider" data-slider 
            data-options="display_selector:#mySlider; initial: 72;">
            <span class="range-slider-handle"></span>
            <span class="range-slider-active-segment"></span>
        </div>  
    </div>
    <div class="small-2 columns">  
        <input type="number" id="mySlider" style="margin-top:7px;" value="72">
    </div>
</div>

运行范例 »