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