JqueryUI-スライダー

_slider_は、特定の範囲内の数値を取得する場合に使用されます。テキスト入力に対するスライダーの利点は、ユーザーが間違った値を入力することが不可能になることです。スライダーで選択できる値はすべて有効です。

jQueryUIは、スライダーウィジェットを介してスライダーコントロールを提供します。 jQueryUIは、ページ内のHTML要素の外観を変更するSlider（）メソッドを提供し、適切なスタイルを与える新しいCSSクラスを追加します。

構文

スライダー（）*メソッドは2つの形式で使用することができます-

link：/jqueryui/jqueryui_slider＃slider_options [$（selector、context）.slider（options）]メソッド
link：/jqueryui/jqueryui_slider＃slider_methods [$（selector、context）.slider（ "action"、params）]メソッド

[slider_options]#

$（セレクター、コンテキスト）.slider（オプション）メソッド

_slider（options）_メソッドは、HTML要素をスライダーとして管理する必要があることを宣言します。 _options_パラメーターは、スライダーの外観と動作を指定するオブジェクトです。

構文

$(selector, context).slider (options);

Javascriptオブジェクトを使用して、一度に1つ以上のオプションを提供できます。提供する複数のオプションがある場合は、次のようにカンマを使用してそれらを分離します-

$(selector, context).slider({option1: value1, option2: value2..... });

次の表は、この方法で使用できるさまざまな_オプション_を示しています-


$( ".selector" ).slider(
   { animate: "fast" }
);
$( ".selector" ).slider(
   { disabled: true }
);
$( ".selector" ).slider(
   { max: 50 }
);
$( ".selector" ).slider(
   { min: 10 }
);
$( ".selector" ).slider(
   { "option", "orientation" }
);
$( ".selector" ).slider(
   { range: true }
);
$( ".selector" ).slider(
   { step: 5 }
);
$( ".selector" ).slider(
   { value: 10 }
);
$( ".selector" ).slider(
   { values: [ 10, 25 ] }
);

次のセクションでは、スライダー機能のいくつかの実用的な例を示します。

デフォルトの機能

次の例は、* slider（）*メソッドにパラメーターを渡さない、スライダー機能の簡単な例を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Slider functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#slider-1" ).slider();
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <div id = "slider-1"></div>
   </body>
</html>

上記のコードをHTMLファイル sliderexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

上記の例では、基本的な水平スライダーであり、マウスまたは矢印キーを使用して移動できる単一のハンドルがあります。

価値、アニメーション、向きの使用

次の例は、JqueryUIのスライダー関数での3つのオプション*（a）値（b）animate および（c）orientation *の使用法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Slider functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#slider-2" ).slider({
               value: 60,
               animate:"slow",
               orientation: "horizontal"
            });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <div id = "slider-2"></div>
   </body>
</html>

上記のコードをHTMLファイル sliderexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

上記の例では、スライダーの_value_、つまり初期値が60に設定されているため、初期値60のハンドルが表示されます。軸を直接クリックして、アニメーション効果を確認してください。

範囲、最小、最大、および値の使用

次の例は、JqueryUIのスライダー関数での3つのオプション*（a）範囲、（b）min 、（c）max 、および（d）値*の使用法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Slider functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#slider-3" ).slider({
               range:true,
               min: 0,
               max: 500,
               values: [ 35, 200 ],
               slide: function( event, ui ) {
                  $( "#price" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
               }
            });
            $( "#price" ).val( "$" + $( "#slider-3" ).slider( "values", 0 ) +
               " - $" + $( "#slider-3" ).slider( "values", 1 ) );
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <p>
         <label for = "price">Price range:</label>
         <input type = "text" id = "price"
            style = "border:0; color:#b9cd6d; font-weight:bold;">
      </p>
      <div id = "slider-3"></div>
   </body>
</html>

上記のコードをHTMLファイル sliderexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

上記の例では、範囲オプションをtrueに設定して、2つのドラッグハンドルで値の範囲をキャプチャしました。ハンドル間のスペースは、これらの値が選択されていることを示すために異なる背景色で塗りつぶされます。

[slider_methods]#

$（セレクター、コンテキスト）.slider（ "action"、params）メソッド

_slider（ "action"、params）_メソッドを使用すると、カーソルを新しい場所に移動するなど、スライダーでアクションを実行できます。アクションは、最初の引数に文字列として指定されます（たとえば、カーソルの新しい値を示す「値」）。次の表で、渡すことができるアクションを確認してください。

構文

$(selector, context).slider ("action", params);;

次の表は、このメソッドで使用できるさまざまな_アクション_を示しています-


$( ".selector" ).slider("destroy");
$( ".selector" ).slider("disable");
$( ".selector" ).slider("enable");
var isDisabled = $( ".selector" ).slider( "option", "disabled" );
var options = $( ".selector" ).slider( "option" );
$( ".selector" ).slider( "option", "disabled", true );
$( ".selector" ).slider( "option", { disabled: true } );
$( ".selector" ).slider("value");
$( ".selector" ).slider( "value", 55 );
var values = $( ".selector" ).slider( "values" );
var value = $( ".selector" ).slider( "values", 0 );
$( ".selector" ).slider( "values", 0, 55 );
$( ".selector" ).slider( "values", [ 55, 105 ] );
var widget = $( ".selector" ).slider( "widget" );

例

ここで、上の表のアクションを使用した例を見てみましょう。次の例は、_disable（）_および_value（）_メソッドの使用方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Slider functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#slider-4" ).slider({
               orientation:"vertical"
            });
            $( "#slider-4" ).slider('disable');
            $( "#slider-5" ).slider({
               orientation:"vertical",
               value:50,
               slide: function( event, ui ) {
                  $( "#minval" ).val( ui.value );
               }
            });
            $( "#minval" ).val( $( "#slider-5" ).slider( "value" ) );
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <div id = "slider-4"></div>
      <p>
         <label for = "minval">Minumum value:</label>
         <input type = "text" id = "minval"
            style = "border:0; color:#b9cd6d; font-weight:bold;">
      </p>
      <div id = "slider-5"></div>
   </body>
</html>

上記のコードをHTMLファイル sliderexample に保存して、JavaScriptをサポートする標準のブラウザで開きます。次の出力も確認する必要があります-

上記の例では、最初のスライダーが無効になり、2番目のスライダーの値が50に設定されます。

スライダー要素のイベント管理

前のセクションで見たスライダー（オプション）メソッドに加えて、JqueryUIは特定のイベントに対してトリガーされるイベントメソッドを提供します。これらのイベントメソッドは以下のとおりです-


$( ".selector" ).slider({
   change: function( event, ui ) {}
});
$( ".selector" ).slider({
   create: function( event, ui ) {}
});
$( ".selector" ).slider({
   slide: function( event, ui ) {}
});
$( ".selector" ).slider({
   start: function( event, ui ) {}
});
$( ".selector" ).slider({
   stop: function( event, ui ) {}
});

例

次の例は、スライダー機能中のイベントメソッドの使用方法を示しています。この例は、start _、 stop 、 change_、および_slide_イベントの使用方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Slider functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#slider-6" ).slider({
               range:true,
               min: 0,
               max: 500,
               values: [ 35, 200 ],
               start: function( event, ui ) {
                  $( "#startvalue" )
                     .val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
               },
               stop: function( event, ui ) {
                  $( "#stopvalue" )
                     .val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
               },
               change: function( event, ui ) {
                  $( "#changevalue" )
                     .val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
               },
               slide: function( event, ui ) {
                  $( "#slidevalue" )
                     .val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
               }
           });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <div id = "slider-6"></div>
      <p>
         <label for = "startvalue">Start:</label>
         <input type = "text" id = "startvalue"
            style = "border:0; color:#b9cd6d; font-weight:bold;">
      </p>
      <p>
         <label for = "stopvalue">Stop:</label>
         <input type = "text" id = "stopvalue"
            style = "border:0; color:#b9cd6d; font-weight:bold;">
      </p>
      <p>
         <label for = "changevalue">Change:</label>
         <input type = "text" id = "changevalue"
            style = "border:0; color:#b9cd6d; font-weight:bold;">
      </p>
      <p>
         <label for = "slidevalue">Slide:</label>
         <input type = "text" id = "slidevalue"
            style = "border:0; color:#b9cd6d; font-weight:bold;">
      </p>
   </body>
</html>

上記のコードをHTMLファイル sliderexample に保存して、JavaScriptをサポートする標準のブラウザで開きます。次の出力も確認する必要があります-

Sr.No.	Option & Description
1	animate このオプションを_true_に設定すると、ユーザーが軸を直接クリックしたときにアニメーション効果が作成されます。デフォルトでは、その値は false です。オプション-アニメーションこのオプションを_true_に設定すると、ユーザーが軸を直接クリックしたときにアニメーション効果が作成されます。デフォルトでは、その値は false です。これはタイプにすることができます- ブール-_true_に設定すると、ハンドルはデフォルトの持続時間でアニメーション化します。文字列- + slow、normal、、_ fast_などの速度の名前番号- +アニメーションの継続時間（ミリ秒単位）。構文 `$( ".selector" ).slider( { animate: "fast" } );`
2	disabled このオプションを_true_に設定すると、スライダーが無効になります。デフォルトでは、その値は false です。オプション-無効このオプションを_true_に設定すると、スライダーが無効になります。デフォルトでは、その値は false です。構文 `$( ".selector" ).slider( { disabled: true } );`
3	max このオプションは、スライダーが到達できる範囲の上限値を指定します。ハンドルが右端（水平スライダーの場合）または上部（垂直スライダーの場合）に移動したときに表される値です。デフォルトでは、その値は 100 です。オプション-最大このオプションは、スライダーが到達できる範囲の上限値を指定します。ハンドルが右端（水平スライダーの場合）または上部（垂直スライダーの場合）に移動したときに表される値です。デフォルトでは、その値は 100 です。構文 `$( ".selector" ).slider( { max: 50 } );`
4	min このオプションは、スライダーが到達できる範囲の下限値を指定します。ハンドルが左端（水平スライダーの場合）または下部（垂直スライダーの場合）に移動したときに表される値です。デフォルトでは、その値は 0 です。オプション-最小このオプションは、スライダーが到達できる範囲の下限値を指定します。ハンドルが左端（水平スライダーの場合）または下部（垂直スライダーの場合）に移動したときに表される値です。デフォルトでは、その値は 0 です。構文 `$( ".selector" ).slider( { min: 10 } );`
5	orientation このオプションは、スライダーの水平方向または垂直方向を示します。デフォルトでは、その値は horizontal です。オプション-方向このオプションは、スライダーの水平方向または垂直方向を示します。デフォルトでは、その値は horizontal です。構文 `$( ".selector" ).slider( { "option", "orientation" } );`
6	range このオプションは、スライダーが範囲を表すかどうかを指定します。デフォルトでは、その値は false です。オプション-範囲このオプションは、スライダーが範囲を表すかどうかを指定します。デフォルトでは、その値は false です。これはタイプにすることができます- ブール-_true_として指定され、スライダーにちょうど2つのハンドルがある場合、スタイル設定できる要素がハンドル間に作成されます。文字列- + _min_または_max_にできます。指定すると、ハンドルからスライダーの開始または終了までの範囲要素がそれぞれ作成されます。構文 `$( ".selector" ).slider( { range: true } );`
7	step このオプションは、スライダーが表すことができる最小値と最大値の間の離散間隔を指定します。デフォルトでは、その値は 1 です。オプション-ステップこのオプションは、スライダーが表すことができる最小値と最大値の間の離散間隔を指定します。デフォルトでは、その値は 1 です。構文 `$( ".selector" ).slider( { step: 5 } );`
8	value このオプションは、シングルハンドルスライダーの初期値を指定します。複数のハンドルがある場合（値オプションを参照）、最初のハンドルの値を指定します。デフォルトでは、その値は 1 です。オプション-値 >このオプションは、シングルハンドルスライダーの初期値を指定します。複数のハンドルがある場合（値オプションを参照）、最初のハンドルの値を指定します。デフォルトでは、その値は 1 です。構文 `$( ".selector" ).slider( { value: 10 } );`
9	values このオプションは配列タイプであり、複数のハンドルを作成し、それらのハンドルの初期値を指定します。このオプションは、ハンドルごとに1つの可能な値の配列である必要があります。デフォルトでは、その値は null です。オプション-値このオプションは配列タイプであり、複数のハンドルを作成し、それらのハンドルの初期値を指定します。このオプションは、ハンドルごとに1つの可能な値の配列である必要があります。デフォルトでは、その値は null です。構文 `$( ".selector" ).slider( { values: [ 10, 25 ] } );`

Sr.No.	Action & Description
1	destroy このアクションは、要素のスライダー機能を完全に破壊します。要素は初期化前の状態に戻ります。このメソッドは引数を取りません。アクション-破壊このアクションは、要素のスライダー機能を完全に破壊します。要素は初期化前の状態に戻ります。このメソッドは引数を取りません。構文 `$( ".selector" ).slider("destroy");`
2	disable このアクションは、スライダー機能を無効にします。このメソッドは引数を取りません。アクション-無効このアクションは、スライダー機能を無効にします。このメソッドは引数を取りません。構文 `$( ".selector" ).slider("disable");`
3	enable このアクションにより、スライダー機能が有効になります。このメソッドは引数を取りません。アクション-有効このアクションにより、スライダー機能が有効になります。このメソッドは引数を取りません。構文 `$( ".selector" ).slider("enable");`
4	option( optionName ) このアクションは、指定されたparamオプションの値を取得します。このオプションは、_slider（オプション）_で使用されるオプションの1つに対応します。ここで、_optionName_は取得するオプションの名前です。アクション-option（optionName）このアクションは、指定されたparamオプションの値を取得します。このオプションは、_slider（オプション）_で使用されるオプションの1つに対応します。ここで、_optionName_は取得するオプションの名前です。構文 `var isDisabled = $( ".selector" ).slider( "option", "disabled" );`
5	option() このアクションは、現在のスライダーオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。アクション-option（）このアクションは、現在のスライダーオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。構文 `var options = $( ".selector" ).slider( "option" );`
6	option( optionName, value ) このアクションは、指定された_optionName_に関連付けられたスライダーオプションの値を設定します。引数_optionName_は設定するオプションの名前であり、_value_はオプションに設定する値です。アクション-option（optionName、value）このアクションは、指定された_optionName_に関連付けられたスライダーオプションの値を設定します。引数_optionName_は設定するオプションの名前であり、_value_はオプションに設定する値です。構文 `$( ".selector" ).slider( "option", "disabled", true );`
7	option( options ) このアクションは、スライダーの1つ以上のオプションを設定します。引数_options_は、設定するオプションと値のペアのマップです。アクション-オプション（オプション）このアクションは、スライダーの1つ以上のオプションを設定します。引数_options_は、設定するオプションと値のペアのマップです。構文 `$( ".selector" ).slider( "option", { disabled: true } );`
8	value このアクションは、_options.value（スライダー）_の現在の値を取得します。スライダーが一意である場合にのみ使用します（一意でない場合は、_slider（ "値"））_を使用します。このシグネチャは引数を受け入れません。アクション-値このアクションは、_options.value（インジケーター）_の現在の値を取得します。インジケーターが一意の場合にのみ使用します（一意でない場合は、_slider（ "values"））_を使用します。このシグネチャは引数を受け入れません。構文 `$( ".selector" ).slider("value");`
9	value( value ) このアクションは、スライダーの値を設定します。アクション-値（値）このアクションは、スライダーの値を設定します。構文 `$( ".selector" ).slider( "value", 55 );`
10	values このアクションは、_options.values_の現在の値（配列内のスライダーの値）を取得します。このシグネチャは引数を受け入れません。アクション-値このアクションは、_options.values_の現在の値（配列内のスライダーの値）を取得します。このシグネチャは引数を受け入れません。構文 `var values = $( ".selector" ).slider( "values" );`
11	values( index ) このアクションは、指定されたハンドルの値を取得します。 _index_は整数型であり、ハンドルのゼロベースのインデックスです。アクション-値（インデックス）このアクションは、指定されたハンドルの値を取得します。 _index_は整数型であり、ハンドルのゼロベースのインデックスです。構文 `var value = $( ".selector" ).slider( "values", 0 );`
12	values( index, value ) このアクションは、指定されたハンドルの値を設定します。ここで、_index_はハンドルのゼロベースのインデックスであり、_value_は設定する値です。アクション-値（インデックス、値）このアクションは、指定されたハンドルの値を設定します。ここで、_index_はハンドルのゼロベースのインデックスであり、_value_は設定する値です。構文 `$( ".selector" ).slider( "values", 0, 55 );`
13	values( values ) このアクションは、すべてのハンドルの値を設定します。アクション-値（値）このアクションは、すべてのハンドルの値を設定します。構文 `$( ".selector" ).slider( "values", [ 55, 105 ] );`
14	widget このアクションは、スライダーを含むjQueryオブジェクトを返します。このメソッドは引数を取りません。アクション-ウィジェットこのアクションは、スライダーを含むjQueryオブジェクトを返します。このメソッドは引数を取りません。構文 `var widget = $( ".selector" ).slider( "widget" );`

Sr.No.	Event Method & Description
1	change(event, ui) このイベントは、ユーザーアクションまたはプログラムによって、ハンドルの値の変更をトリガーします。イベント-change（event、ui）このイベントは、ユーザーアクションまたはプログラムによって、ハンドルの値の変更をトリガーします。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- handle -変更されたハンドルを表すjQueryオブジェクト。値-スライダーの現在の値。構文 `$( ".selector" ).slider({ change: function( event, ui ) {} });`
2	create(event, ui) このイベントは、スライダーが作成されたときにトリガーされます。イベント-create（event、ui）このイベントは、スライダーが作成されたときにトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。構文 `$( ".selector" ).slider({ create: function( event, ui ) {} });`
3	slide(event, ui) このイベントは、ハンドルがスライダーを介してドラッグされるたびに、マウス移動イベントに対してトリガーされます。 falseを返すと、スライドがキャンセルされます。イベント-スライド（イベント、UI）このイベントは、ハンドルがスライダーを介してドラッグされるたびに、マウス移動イベントに対してトリガーされます。 falseを返すと、スライドがキャンセルされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- handle -移動されるハンドルを表すjQueryオブジェクト。値-イベントがキャンセルされない場合にハンドルが移動する値。値-マルチハンドルスライダーの現在の値の配列。構文 `$( ".selector" ).slider({ slide: function( event, ui ) {} });`
4	start(event, ui) このイベントは、ユーザーがスライドを開始したときにトリガーされます。イベント-start（event、ui）このイベントは、ユーザーがスライドを開始したときにトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- handle -移動されるハンドルを表すjQueryオブジェクト。値-スライダーの現在の値。構文 `$( ".selector" ).slider({ start: function( event, ui ) {} });`
5	stop(event, ui) このイベントは、スライドが停止するとトリガーされます。イベント-停止（イベント、UI）このイベントは、スライドが停止するとトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は- handle -移動されたハンドルを表すjQueryオブジェクト。値-スライダーの現在の値。構文 `$( ".selector" ).slider({ stop: function( event, ui ) {} });`

Jqueryui-slider

目次

JqueryUI-スライダー

構文

$（セレクター、コンテキスト）.slider（オプション）メソッド

構文

デフォルトの機能

価値、アニメーション、向きの使用

範囲、最小、最大、および値の使用

$（セレクター、コンテキスト）.slider（ "action"、params）メソッド

構文

例

スライダー要素のイベント管理

例