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_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>
嘗試一下 ?
