Latest web development tutorials

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_selectorinitial數據選項:

實例

< 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 startend來設置區間值。 以下實例設置區間值為"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 >

嘗試一下»