滑桿

JavaScript

這個便利的小滑桿非常適合在一定範圍內設定特定值。

基礎

透過在容器元素中加入類別 .slider 和屬性 data-slider 來建立滑桿。您還應該為滑桿定義起始值和最大值。

容器內有三個元素

使用者拖曳的控制項 (.slider-handle)。
根據控制項所在位置動態調整大小的填滿 (.slider-fill)。
儲存滑桿值的隱藏 <input>。

data-initial-start="" 值是滑桿控制項的起始位置。data-end="" 是滑桿的最大值。在以下範例中，從 200 中的 50 開始表示滑桿控制項將從總量的 25% 開始。

觀看影片中的這部分

<div class="slider" data-slider data-initial-start="50" data-end="200">
  <span class="slider-handle"  data-slider-handle role="slider" tabindex="1"></span>
  <span class="slider-fill" data-slider-fill></span>
  <input type="hidden">
</div>

垂直

若要獲得垂直，只要新增 .vertical 類別和 data-vertical="true" 滑桿。

觀看影片中的這部分

<div class="slider vertical" data-slider data-initial-start="25" data-end="200" data-vertical="true">
  <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
  <span class="slider-fill" data-slider-fill></span>
  <input type="hidden">
</div>

停用

新增類別 .disabled 以停用與滑桿的互動。

<div class="slider disabled" data-slider data-initial-start="78">
  <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
  <span class="slider-fill" data-slider-fill></span>
  <input type="hidden">
</div>

兩個控制項

雙控制項滑桿可用於定義值範圍，而不是單一值。若要建立雙控制項滑桿，請新增第二個控制項和第二個 <input>。這適用於水平和垂直滑桿。

您可以將 ID 新增至滑桿內的 <input>，以更輕鬆地存取這些值。如果您不這麼做，外掛程式會為您新增一個 ID。

請注意，第一個控制項會控制第一個 <input>，而第二個控制項會控制第二個 <input>。

觀看影片中的這部分

<div class="slider" data-slider data-initial-start="25" data-initial-end="75">
  <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
  <span class="slider-fill" data-slider-fill></span>
  <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
  <input type="hidden">
  <input type="hidden">
</div>

資料繫結

透過資料繫結，您可以將滑桿連線至外部 <input> 欄位。設定資料繫結後，拖曳控制項會變更文字欄位內的數值，而編輯文字欄位內的數值會即時移動滑桿。

若要設定所有內容，請建立一個具有 ID 的 <input>，並將 aria-controls="id" 新增至滑桿控制項，其中 id 是 <input> 的 ID。

觀看影片中的這部分

<div class="grid-x grid-margin-x">
  <div class="cell small-10">
    <div class="slider" data-slider data-initial-start="50">
      <span class="slider-handle"  data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput1"></span>
      <span class="slider-fill" data-slider-fill></span>
    </div>
  </div>
  <div class="cell small-2">
    <input type="number" id="sliderOutput1">
  </div>
</div>

或使用步長

<div class="grid-x grid-margin-x">
  <div class="cell small-10">
    <div class="slider" data-slider data-initial-start="50" data-step="5">
      <span class="slider-handle"  data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput2"></span>
      <span class="slider-fill" data-slider-fill></span>
    </div>
  </div>
  <div class="cell small-2">
    <input type="number" id="sliderOutput2">
  </div>
</div>

原生範圍滑桿

在 Foundation 6.2 中，我們為 <input type="range"> 引入了樣式，這是範圍滑桿的原生 HTML 元素。它並非在每個瀏覽器中都受支援，特別是 IE9 和一些較舊的行動裝置瀏覽器。查看範圍輸入類型的瀏覽器支援狀況。

觀看影片中的這部分

<input type="range" min="1" max="100" step="1">

如果您使用的是 Foundation 的 Sass 版本，請將此行新增至您的主 Sass 檔案

@include foundation-range-input;

可以在相同的程式碼庫中同時使用 JavaScript 滑桿和原生滑桿，因為所使用的 CSS 選擇器不會重疊。以下是原生滑桿的不同之處

較少的標記：只要撰寫 <input type="range"> 即可。
不需要 JavaScript，這保證它在大部分瀏覽器中執行速度較快。
若要停用滑桿，請新增 disabled 作為屬性，而不是類別。
不支援垂直方向。
不支援兩個手把。

非線性值轉換

有時並非每個值都具有同等重要性。在以下範例中，滑桿透過新增log類型位置值函數，聚焦在較高的數字。或者，也可以使用pow類型位置值函數，實現相反的效果。

nonLinearBase 選項是選用的，預設值為 5。

<div class="grid-x grid-margin-x">
  <div class="cell small-10">
    <div class="slider" data-slider data-initial-start="50" data-step="1" data-position-value-function="log" data-non-linear-base="5">
      <span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutputNonLinear"></span>
    </div>
  </div>
  <div class="cell small-2">
    <input type="number" id="sliderOutputNonLinear">
  </div>
</div>

重新整理

滑桿在計算如何顯示自身時，會考量手把的寬度。這表示如果滑桿最初是隱藏的，或在調整值時隱藏，產生的視覺效果會略有不同，因為手把的寬度是不確定的。如果這會造成問題，您可以使用 JavaScript 在從隱藏狀態變更時，強制滑桿重新整理。範例

$('#my-slider').show();
$('#my-slider').foundation('_reflow');

Sass 參考

變數

可以在專案的設定檔中，使用這些 Sass 變數自訂此元件的預設樣式。

名稱	類型	預設值	說明
`$slider-width-vertical`	數字	`0.5rem`	垂直滑桿的預設滑桿寬度。（不適用於原生滑桿。）
`$slider-transition`	轉場	`all 0.2s ease-in-out`	要套用至滑桿手把和填滿的轉場屬性。（不適用於原生滑桿。）

混合

我們使用這些混合來建立此元件的最終 CSS 輸出。您可以自行使用混合，從我們的元件建立您自己的類別結構。

slider-container

@include slider-container;

新增滑桿的常用樣式。

slider-fill

@include slider-fill;

新增滑桿的常用填滿樣式。

slider-handle

@include slider-handle;

新增滑桿手把的常用樣式。

JavaScript 參考

初始化

您的 JavaScript 必須包含以下檔案才能使用此外掛程式

foundation.core.js
foundation.slider.js
- 搭配輔助函式庫 foundation.util.motion.js
- 搭配輔助函式庫 foundation.util.triggers.js
- 搭配輔助函式庫 foundation.util.keyboard.js
- 使用工具程式庫 foundation.util.touch.js

Foundation.Slider

建立滑桿控制項的新執行個體。

var elem = new Foundation.Slider(element, options);

名稱	類型	說明
`element`	jQuery	要製成滑桿控制項的 jQuery 物件。
`options`	物件	覆寫預設的附加元件設定。

附加元件選項

使用這些選項自訂 Slider 的執行個體。附加元件選項可以設定為個別資料屬性、一個合併的 data-options 屬性，或作為傳遞給附加元件建構函式的物件。深入了解 JavaScript 附加元件的初始化方式。

名稱	類型	預設	說明
`data-start`	`數字`	`0`	滑桿刻度的最小值。
`data-end`	`數字`	`100`	滑桿刻度的最大值。
`data-step`	`數字`	`1`	每次變更事件的最小值變更。
`data-initial-start`	`數字`	`0`	初始化時，控制項/輸入值 (左控制項/第一個輸入值) 應設定為的值。
`data-initial-end`	`數字`	`100`	初始化時，右控制項/第二個輸入值應設定為的值。
`data-binding`	`布林值`	`false`	允許輸入值位於容器外並可見。由 JS 設定
`data-click-select`	`布林值`	`true`	允許使用者按一下/輕觸滑桿列來選取值。
`data-vertical`	`布林值`	`false`	設定為 true 並使用 `vertical` 類別將對齊方式變更為垂直。
`data-draggable`	`布林值`	`true`	允許使用者拖曳滑桿控制項來選取值。
`data-disabled`	`布林值`	`false`	停用滑桿並防止套用事件監聽器。由 JS 使用 `disabledClass` 再次檢查。
`data-double-sided`	`布林值`	`false`	允許使用兩個控制項。由 JS 再次檢查。變更一些邏輯處理。
`data-decimal`	`數字`	`2`	附加元件應使用的浮點數精確度小數位數。
`data-move-time`	`數字`	`200`	如果使用者按一下/輕觸列，移動滑桿控制項的動畫時間（以毫秒為單位）。如果在 Sass 設定中更新轉場時間，需要手動設定。
`data-disabled-class`	`字串`	`disabled`	套用至已停用滑桿的類別。
`data-invert-vertical`	`布林值`	`false`	會反轉垂直滑桿的預設配置。
`data-changed-delay`	`數字`	`500`	值變更後觸發 `changed.zf-slider` 事件之前的毫秒數。
`data-non-linear-base`	`數字`	`5`	非線性滑塊的基礎值
`data-position-value-function`	`字串`	`linear`	非線性滑塊的基礎值，可能的值有：`'linear'`, `'pow'` 和 `'log'`. Pow 和 Log 使用 nonLinearBase 設定。

事件

這些事件將從附加了 Slider 外掛程式的任何元素觸發。

名稱	說明
`moved.zf.slider`	當手柄移動完成時觸發。
`changed.zf.slider`	當值在給定時間內沒有變更時觸發。

方法

_destroy

$('#element').foundation('_destroy');

摧毀滑塊外掛程式。