# Foundation 滑塊 Foundation 滑塊允許用戶通過拖動來選取區間值:  滑塊可以通過使用 `&lt;div class="range-slider" data-slider&gt;` 創建。在 `&lt;div&gt;` 內, 添加兩個 `&lt;span&gt;` 元素: `&lt;span class="range-slider-handle"&gt;` 創建矩形滑塊（藍色背景）， `&lt;span class="range-slider-active-segment"&gt;` 是在滑塊后的灰色橫條，是滑塊拖動區域。 **注意:** 滑塊需要使用 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> ``` ### 顯示滑塊值 如果我們需要在滑塊拖動時實時顯示值，可以通過在 `&lt;div&gt;` 中添加 `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" style="display:block;margin-top:14px;"></span> ? </div> </div> ``` ### 使用 Input 以下實例使用 `&lt;input&gt;` 取代 `&lt;span&gt;` 來顯示滑塊的值: ### 實例 ``` <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> ```