Range Slider

Range Slider UIパターンの使用方法

この例では、ユーザーがローンの返済月数を選択できる範囲スライダを作成します。

1. Service StudioのツールボックスでRange Sliderを検索します。

   Range Sliderウィジェットが表示されます。

   

2. ツールボックスから、Range Sliderウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。

   

3. ［Properties］タブで、最小値、最大値、初期値を入力します。この例では、静的な値を追加しています。

   

4. OnChangeイベントを作成するため、［Properties］タブの［Handler］ドロップダウンで［New Client Action］を選択します。

   

   デフォルトで、Value入力パラメータが作成されます。

   

5. ツールボックスからContainerウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグし、コンテンツを［Container］プレースホルダに追加します。この例では、テキストとExpressionを追加しています。

   

6. Expressionの変数を作成するため、画面名を右クリックして［Add Local Variable］を選択し、［Properties］タブで名前とデータ型（この例では、Decimalを使用）を入力します。

   

7. 新しい変数をExpressionにバインドするため、Expressionウィジェットをダブルクリックし、［Expression Value］エディタで先ほど作成した変数を選択して［Done］をクリックします。

   

8. Valueパラメータが範囲スライダの選択を読み取るようにするため、クライアントアクションをダブルクリックし、ツールボックスからAssignアクションをクライアントアクションへ追加します。

   

9. AssignのVariableを作成したローカル変数に設定し、AssignのValueを自動生成された入力パラメータ（Value）に設定します。

   

10. ［Properties］タブで（オプションの）プロパティを設定し、範囲スライダのルックアンドフィールを変更できます。

    

これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。

Result

プロパティ