编程入门教程

Foundation 滑块

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

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

注意: 滑块需要使用 JavaScript。所以你需要初始化 oundation 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_selectorinitial 数据选项:

实例

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