財団スライダー

基礎スライダードラッグして値の範囲を選択することを可能にします。

使用して、スライダー<div class="range-slider" data-slider> 」データスライダーを>作成します。 <div>の内側、追加2 <span>要素： <span class="range-slider-handle">長方形のスライダー（青色の背景色）の作成、 <span class="range-slider-active-segment">スライダーエリア後のグレーのバースライダインチ

注：スライダはJavaScriptが必要です。 だから、oundationのJSを初期化する必要があります。

フィレットを無効スライダー

使用.radiusと.round丸みを帯びた角のスライダーを追加するためのクラスを。 使用.disabledスライダーを無効にするクラス：

縦のスライダー

使用.vertical-rangeクラスとdata-options="vertical: true;" 、「縦のスライダーを作成するには：

スライダ値

デフォルトでは、の途中でスライダバー（「50」の値）。 あなたが追加することができdata-options="initial: num " "プロパティのデフォルト値を変更するには：

ディスプレイのスライダ値

私たちはときにリアルタイム表示スライダ値をドラッグする必要がある場合は、することによって得ることができる<div>を追加data-options="display_selector:# id " idは、例として、id属性とスライダ要素の値と一致します。

データオプションの組み合わせ

次の例では、使用していますdisplay_selectorとinitialデータオプションを：

ステップ？ロング

デフォルトでは、スライダは、数の増加を減少させるために移動させて「1」 あなたが追加することができdata-options="step: num ;" ;"属性は、ステップ値を変更するには？ 例は25に設定されています：

カスタム間隔

デフォルトでは、「100」から「0」の範囲の値 あなたは、データ・オプションを追加することができますstartし、 end間隔値を設定します。 以下の例は、「1」〜「20」の間の値を設定します。

グリッドを使用しました

グリッド内のスライダーを使用するには、以下を使用します。

入力を使用してください

次の例では、使用して<input>置き換える<span>スライダーの値を表示するに：