Foundation 滑塊
Foundation 滑塊允許用戶通過拖動來選取區間值:
滑塊可以通過使用<div class="range-slider" data-slider>
創建。 在<div>
內,添加兩個<span>
元素: <span class="range-slider-handle">
創建矩形滑塊(藍色背景), <span class="range-slider-active-segment">
是在滑塊後的灰色橫條,是滑塊拖動區域。
注意:滑塊需要使用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;"
來創建垂直滑塊:
實例
< span class= "range-slider-handle" > < /span >
< span class= "range-slider-active-segment" > < /span >
< /div >
嘗試一下»
滑塊值
默認情況下,滑塊放在橫條的中間(數值為"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 >
嘗試一下»
組合數據選項
以下實例使用了display_selector
和initial
數據選項:
實例
< 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:
實例
< 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":
實例
< 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= "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 >
嘗試一下»