Range Slider
Range Slider UIパターンを使用すると、ユーザーが2つの値の範囲内にある単一の値を選択することができます。このパターンを使用して、コンテンツを事前に定められた範囲内で調整することができます。スライダを動かして値を増減します。
Range Slider UIパターンの使用方法
この例では、ユーザーがローンの返済月数を選択できる範囲スライダを作成します。
-
Service Studioのツールボックスで
Range Sliderを検索します。Range Sliderウィジェットが表示されます。
-
ツールボックスから、Range Sliderウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。
-
［Properties］タブで、最小値、最大値、初期値を入力します。この例では、静的な値を追加しています。
-
OnChangeイベントを作成するため、［Properties］タブの［Handler］ドロップダウンで［New Client Action］を選択します。
デフォルトで、Value入力パラメータが作成されます。
-
ツールボックスからContainerウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグし、コンテンツを［Container］プレースホルダに追加します。この例では、テキストとExpressionを追加しています。
-
Expressionの変数を作成するため、画面名を右クリックして［Add Local Variable］を選択し、［Properties］タブで名前とデータ型（この例では、Decimalを使用）を入力します。
-
新しい変数をExpressionにバインドするため、Expressionウィジェットをダブルクリックし、［Expression Value］エディタで先ほど作成した変数を選択して［Done］をクリックします。
-
Valueパラメータが範囲スライダの選択を読み取るようにするため、クライアントアクションをダブルクリックし、ツールボックスからAssignアクションをクライアントアクションへ追加します。
-
AssignのVariableを作成したローカル変数に設定し、AssignのValueを自動生成された入力パラメータ（Value）に設定します。
-
［Properties］タブで（オプションの）プロパティを設定し、範囲スライダのルックアンドフィールを変更できます。
これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。
Result
プロパティ
| プロパティ | 説明 |
|---|---|
| MinValue（Decimal型）: 必須 | スライダの最小値。 例
|
| MaxValue（Decimal型）:必須 | スライダの最大値。 例
|
| InitialValue（Decimal型）:必須 | ページが描画されたときにデフォルトで選択される値。最小値と最大値の間である必要があります。 例
|
| Step（Decimal型）:オプション | スライダが目盛りの単位で移動します。 例
|
| ShowPips（Boolean型）:オプション | Trueの場合、スライダの下に目盛りが表示されます。これがデフォルト値です。Falseの場合、目盛りは表示されません。 |
| PipsStep（Integer型）:オプション | 目盛りを描画した後の範囲の間隔（ShowPipsが有効になっている場合）。指定されていない場合は、コンポーネントによってデータに適するステップが推測されます。 |
| ChangeEventDuringSlide（Boolean型）:オプション | Trueの場合、スライダのドラッグ中に変更イベントがトリガーされます。これがデフォルト値です。Falseの場合、ユーザーがスライダを離したときにのみ変更イベントがトリガーされます。ヒント: スライダの値に基づいてクエリを更新する場合、これを_False_に設定する可能性が高いです。 |
| IsDisabled（Boolean型）:オプション | Trueの場合、スライダが無効になります。Falseの場合、スライダが有効になります。これがデフォルト値です。 |
| IsVertical（Boolean型）:オプション | Trueの場合、スライダが縦方向になります。Falseの場合、スライダが横方向になります。 |
| VerticalHeight（Integer型）:オプション | IsVerticalがTrueの場合、このプロパティを使用してスライダの高さ（ピクセル単位）を設定します。 例
|
| AdvancedFormat（Text型）:オプション | 入力によって提供されるもの以外の追加オプションを使用できます。詳細については、https://kimmobrunfeldt.github.io/pro...bar.js/をご覧ください。例: { easing: 'bounce' } |