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" stylex="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" stylex="margin-top:7px;" value="72">

</div>

</div>

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！