Toggle navigation

Foundation 滑块

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

滑块可以通过使用<div class="range-slider" data-slider>创建。在<div> 内, 添加两个 <span>元素:<span class="range-slider-handle">创建矩形滑块（蓝色背景），<span class="range-slider-active-segment">是在滑块后的灰色横条，是滑块拖动区域。

注意: 滑块需要使用 JavaScript。所以你需要初始化Foundation JS:

实例

<div class="range-slider" data-slider>
  <span class="range-slider-handle"></span>
  <span class="range-slider-active-segment"></span>
</div>

<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>
试一试

圆角和禁用滑块

使用.radius和.round类来添加圆角滑块。使用.disabled类来禁用滑块：

实例

<div class="range-slider" data-slider>..</div>
<div class="range-slider radius" data-slider>...</div>
<div class="range-slider round" data-slider>...</div>
<div class="range-slider disabled" data-slider>...</div>
试一试

垂直滑块

使用.vertical-range类和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 匹配，如下实例：

实例

<!-- Display the slider value in this span -->
<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数据选项:

实例

<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;" 属性来修改步长值。实例中设置为 25:

实例

<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 来设置区间值。以下实例设置区间值为 "1" 到 "20":

实例

<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">
    <!-- The display element (Tip: use CSS to perfectly position it) -->
    <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">
    <!-- The display element (Tip: use CSS to perfectly position it) -->
    <input type="number" id="mySlider" style="margin-top:7px;" value="72">
  </div>
</div>
试一试