スライダは、ユーザが数値の範囲内から値を選択するために、ハンドルをドラッグすることができます：

スライダは、<div class="range-slider" data-slider> で作成します。 <div> の中に、2つの <span> 要素を追加します； 1つは、実際のハンドル（ドラッグ可能な青色の長方形）を作成するため <span class="range-slider-handle"> を、もう1つは、ハンドルがどれ位ドラッグされたかを示すため、ハンドルの後ろに灰色を追加する <span class="range-slider-active-segment"> です。

注: Sliders には JavaScript が必須です。foundation JS の初期を忘れないでください：

<div class="range-slider" data-slider>
<span class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
</div>


<script>
$(document).ready(function() {
$(document).foundation();
})
</script>

結果：

Try it Yourself »

角丸 & 無効なスライダ

.radius および .round クラスは、スライダの角に丸み加えます。 .disabled クラスは、スライダを無効にします：:

例

結果：

Default:

Radius:

Round:

Disabled:

Try it Yourself »

縦向きのスライダ

スライダを縦に表示するには、.vertical-range クラスと data-options="vertical: true;" を追加します：

例

結果：

Try it Yourself »

スライダの値

デフォルトで、スライダハンドルはスライダの中央（多くの場合、数値 "50"）に配置されます。デフォルト値を変更するには、data-options="initial: num" 属性を追加します：

例

結果：

Try it Yourself »

スライダの値を表示

スライダの値を表示し、ハンドルをドラッグ中に動的に値を更新することができます。 data-options="display_selector:#id" 属性と、スライダの値を表示するために id に一致する要素を追加してください。

注: スライダ値を表示する要素は、id が div の id とマッチしている限り、好きな場所に置くことができます（この例では mySlider）：

例

<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>

Result - Drag the handle to see the effect:

Try it Yourself »

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

例

結果：

Try it Yourself »

ステップ

デフォルトでは、範囲スライダのステップは "1" です。ステップの値を変更するには、 data-options="step: num;"属性を追加します。この例では、ステップが 25 です：

例

Result - Drag the handle to see the result:

Try it Yourself »

カスタム範囲

デフォルトでは、範囲スライダの最小値と最大値は "0" 〜 "100" です。これを変更するには、start と end データ・オプションを使用します。この例では、"1" ～ "20" の値しか選択できません：

例

Result - Drag the handle to see the result:

Try it Yourself »

グリッドの使用

スライダの横にスライダ値を表示するグリッドシステムの使用例：

例

結果：

Try it Yourself »

Input の使用

<span> の代わりに <input> を使用してスライダ値を表示する例：

例

結果：

Try it Yourself »

Foundation 範囲スライダ