財団スライダー2024 年の最新の入門チュートリアル。このコースでは フィレットを無効スライダー,縦のスライダー,スライダ値, について学習できます。
財団スライダー
基礎スライダードラッグして値の範囲を選択することを可能にします。
使用して、スライダー<div class="range-slider" data-slider>
」データスライダーを>作成します。 <div>
の内側、追加2 <span>
要素: <span class="range-slider-handle">
長方形のスライダー(青色の背景色)の作成、 <span class="range-slider-active-segment">
スライダーエリア後のグレーのバースライダインチ
注:スライダはJavaScriptが必要です。 だから、oundationのJSを初期化する必要があります。
例
<DIVクラス= "範囲スライダ 」データスライダー>
<スパンクラス= "レンジ・スライダー -handle"> </ span>の
<スパンクラス= "範囲スライダ -activeセグメント"> </ span>の
</ DIV>
<! -初期財団JS - >
<スクリプト>
$(ドキュメント).ready(関数(){
$(ドキュメント).foundation();
})
</スクリプト>
»をお試しください
フィレットを無効スライダー
使用.radius
と.round
丸みを帯びた角のスライダーを追加するためのクラスを。 使用.disabled
スライダーを無効にするクラス:
例
<DIVクラス= "範囲スライダ 」データ・スライダー> ja </ divの>
<DIVクラス= "範囲スライダ半径「データ・スライダー> ja. </ DIV>
<DIVクラス= "レンジ・スライダーラウンド「データ・スライダー> ja. </ DIV>
<DIVクラス= "範囲スライダ無効になって「データ・スライダー> ja. </ DIV>
»をお試しください
縦のスライダー
使用.vertical-range
クラスとdata-options="vertical: true;"
、「縦のスライダーを作成するには:
例
<DIV CLASS = "範囲スライダー垂直レンジ「データ・スライダデータ・オプション="縦:真; ">
<スパンクラス= "レンジ・スライダー -handle"> </ span>の
<スパンクラス= "範囲スライダ -activeセグメント"> </ span>の
</ DIV>
»をお試しください
スライダ値
デフォルトでは、の途中でスライダバー(「50」の値)。 あなたが追加することができdata-options="initial: num "
"プロパティのデフォルト値を変更するには:
例
<DIV CLASS = "範囲スライダ 」データスライダーデータ・オプション="初期:80; ">
<スパンクラス= "レンジ・スライダー -handle"> </ span>の
<スパンクラス= "範囲スライダ -activeセグメント"> </ span>の
</ DIV>
»をお試しください ディスプレイのスライダ値
私たちはときにリアルタイム表示スライダ値をドラッグする必要がある場合は、することによって得ることができる<div>
を追加data-options="display_selector:# id "
idは、例として、id属性とスライダ要素の値と一致します。
例
<! -でスライダーの値を表示し 、このスパン- >
<スパンのid = "mySlider"> </ span>の
<DIVクラス= "範囲スライダ 」データスライダーデータ・オプション=" display_selector:#mySlider; ">
<スパンクラス= "レンジ・スライダー -handle"> </ span>の
<スパンクラス= "範囲スライダ -activeセグメント"> </ span>の
</ DIV>
»をお試しください データオプションの組み合わせ
次の例では、使用していますdisplay_selector
とinitial
データオプションを:
例
<スパンのid = "mySlider"> </ span>の
<DIVクラス= "範囲スライダ 」データスライダーデータ・オプション=" display_selector:#mySlider;初期:20; ">
<スパンクラス= "レンジ・スライダー -handle"> </ span>の
<スパンクラス= "範囲スライダ -activeセグメント"> </ span>の
</ DIV>
»をお試しください ステップ?ロング
デフォルトでは、スライダは、数の増加を減少させるために移動させて「1」 あなたが追加することができdata-options="step: num ;"
;"属性は、ステップ値を変更するには? 例は25に設定されています:
例
<スパンのid = "mySlider"> </ span>の
<DIVクラス= "範囲スライダー ="データスライダーデータ・オプション」display_selector:#mySlider;ステップ:25; ">
<スパンクラス= "レンジ・スライダー -handle"> </ span>の
<スパンクラス= "範囲スライダ -activeセグメント"> </ span>の
</ DIV>
»をお試しください カスタム間隔
デフォルトでは、「100」から「0」の範囲の値 あなたは、データ・オプションを追加することができますstart
し、 end
間隔値を設定します。 以下の例は、「1」〜「20」の間の値を設定します。
例
<スパンのid = "mySlider"> </ span>の
<DIVクラス= "範囲スライダ 」データスライダーデータ・オプション=" display_selector:#mySlider;開始:1;終わり:20; ">
<スパンクラス= "レンジ・スライダー -handle"> </ span>の
<スパンクラス= "範囲スライダ -activeセグメント"> </ span>の
</ DIV>
»をお試しください グリッドを使用しました
グリッド内のスライダーを使用するには、以下を使用します。
例
<DIVクラス = "行">
<DIVクラス= "小-10カラム">
<DIVクラス= "範囲スライダ 」データスライダーデータ・オプション=" display_selector:#mySlider; ">
<スパンクラス= "レンジ・スライダー -handle"> </ span>の
<スパンクラス= "範囲スライダ -activeセグメント"> </ span>の
</ DIV>
</ DIV>
<DIVクラス= "小2列">
< -表示素子(ヒント! :完全にそれを配置するためにCSSを使用) - >
<スパンのid = "mySlider"スタイル = "表示:ブロック;マージントップ:14px;"> </ span>の
</ DIV>
</ DIV>
»をお試しください 入力を使用してください
次の例では、使用して<input>
置き換える<span>
スライダーの値を表示するに:
例
<DIVクラス = "行">
<DIVクラス= "小-10カラム">
<DIVクラス= "範囲スライダ 」データスライダーデータ・オプション=" display_selector:#mySlider;初期:72; ">
<スパンクラス= "レンジ・スライダー -handle"> </ span>の
<スパンクラス= "範囲スライダ -activeセグメント"> </ span>の
</ DIV>
</ DIV>
<DIVクラス= "小2列">
< -表示素子(ヒント! :完全にそれを配置するためにCSSを使用) - >
<入力タイプ= "数" ID = "mySlider"スタイル= "マージントップ:7px;"値= "72">
</ DIV>
</ DIV>
»をお試しください