免費AI編程助手
Foundation 滑塊
Foundation 滑塊允許用戶通過拖動來選取區(qū)間值:
滑塊可以通過使用 <div class="range-slider" data-slider> 創(chuàng)建。在
<div> 內(nèi), 添加兩個 <span> 元素: <span class="range-slider-handle"> 創(chuàng)建矩形滑塊（藍色背景），
<span class="range-slider-active-segment"> 是在滑塊后的灰色橫條，是滑塊拖動區(qū)域。
注意: 滑塊需要使用 JavaScript。所以你需要初始化 oundation JS:
實例
<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 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;" 來創(chuàng)建垂直滑塊:
實例
<span class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
</div>
嘗試一下 ?
滑塊值
默認情況下，滑塊放在橫條的中間 (數(shù)值為 "50")?？梢酝ㄟ^添加 data-options="initial: num"
屬性來修改默認值:
實例
<span class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
</div>
嘗試一下 ?
顯示滑塊值
如果我們需要在滑塊拖動時實時顯示值，可以通過在
<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>
嘗試一下 ?
組合數(shù)據(jù)選項
以下實例使用了 display_selector 和 initial 數(shù)據(jù)選項:
實例
<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>
嘗試一下 ?
步長
默認情況下，滑塊滑動的增加減少的數(shù)量為 "1"?？梢酝ㄟ^添加 data-options="step: num;" 屬性來修改步長值。實例中設(shè)置為 25:
實例
<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>
嘗試一下 ?
自定義區(qū)間
默認情況下，區(qū)間值在 "0" 到 "100"。可以通過添加 data-options start 和 end 來設(shè)置區(qū)間值。以下實例設(shè)置區(qū)間值為 "1" 到 "20":
實例
<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>
嘗試一下 ?
使用網(wǎng)格
以下使用為在網(wǎng)格中使用滑塊：
實例
<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="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>
嘗試一下 ?
更多建議：