Foundation 滑块

前言

• Foundation 滑块。

1、滑块

• 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>
  
  <!-- 初始化 Foundation JS -->
  <script>
       $(document).ready(function () {
          $(document).foundation();
       })
  </script>

• 效果 🔗

  

2、圆角和禁用滑块

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

• 实例

  <span>默认:</span>
  <div class="range-slider" data-slider>
      <span class="range-slider-handle"></span>
      <span class="range-slider-active-segment"></span>
  </div>
  
  <span>圆角:</span>
  <div class="range-slider radius" data-slider>
      <span class="range-slider-handle"></span>
      <span class="range-slider-active-segment"></span>
  </div>
  
  <span>圆形:</span>
  <div class="range-slider round" data-slider>
      <span class="range-slider-handle"></span>
      <span class="range-slider-active-segment"></span>
  </div>
  
  <span>禁用:</span>
  <div class="range-slider disabled" 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>

• 效果 🔗

  

3、垂直滑块

• 使用 .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>
  
  <!-- 初始化 Foundation JS -->
  <script>
       $(document).ready(function () {
          $(document).foundation();
       })
  </script>

• 效果 🔗

  

4、滑块值

• 默认情况下，滑块放在横条的中间 (数值为 “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>
  
  <!-- 初始化 Foundation JS -->
  <script>
       $(document).ready(function () {
          $(document).foundation();
       })
  </script>

• 效果 🔗

  

4.1 显示滑块值

• 如果需要在滑块拖动时实时显示值，可以通过在 <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>
  
  <!-- 初始化 Foundation JS -->
  <script>
       $(document).ready(function () {
          $(document).foundation();
       })
  </script>

• 效果 🔗

  

4.2 组合数据选项

• 以下实例使用了 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>
  
  <!-- 初始化 Foundation JS -->
  <script>
       $(document).ready(function () {
          $(document).foundation();
       })
  </script>

• 效果 🔗

  

4.3 步长

• 默认情况下，滑块滑动的增加减少的数量为 “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>
  
  <!-- 初始化 Foundation JS -->
  <script>
       $(document).ready(function () {
          $(document).foundation();
       })
  </script>

• 效果 🔗

  

4.4 自定义区间

• 默认情况下，区间值在 “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>
  
  <!-- 初始化 Foundation JS -->
  <script>
       $(document).ready(function () {
          $(document).foundation();
       })
  </script>

• 效果 🔗

  

4.5 使用网格

• 以下使用为在网格中使用滑块：

• 实例

  <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>
  
  <!-- 初始化 Foundation JS -->
  <script>
       $(document).ready(function () {
          $(document).foundation();
       })
  </script>

• 效果 🔗

  

4.6 使用 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>
  
  <!-- 初始化 Foundation JS -->
  <script>
       $(document).ready(function () {
          $(document).foundation();
       })
  </script>

• 效果 🔗