Skip to main content

 

 

 

 
Language:
 
従来のWebアプリにのみ適用されます
 
 
OutSystems

Range Slider

Range Slider UIパターンを使用すると、ユーザーが2つの値の範囲内にある単一の値を選択することができます。このパターンを使用して、コンテンツを事前に定められた範囲内で調整することができます。スライダを動かして値を増減します。

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

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

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

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

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

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

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

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

  5. 現在のスライダの値を保存するため、画面名を右クリックして[Add Local Variable]を選択し、ローカル変数を作成してから[Properties]タブで名前とデータ型(この例では、Decimalを使用)を入力します。

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

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

  8. 範囲スライダの値を表示するため、ツールボックスからContainerウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグし、Containerの名前を入力してからコンテンツを[Container]プレースホルダに追加します。この例では、「DisplayValue」という名前を入力し、ContainerにテキストとExpressionを追加しています。

  9. ツールボックスからAjax Refreshアクションを画面アクションに追加し、[Select Widget]ポップアップでContainerウィジェットの名前(この例ではDisplayValue)に移動して選択し、[OK]をクリックします。

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

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

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

Result

プロパティ

プロパティ 説明
MinValue(Decimal型): 必須 スライダの最小値。

  • 1 - スライダの最小値は1です。
MaxValue(Decimal型): 必須 スライダの最大値。

  • 100 - スライダの最大値は100です。
InitialValue(Decimal型): 必須 ページが描画されたときにデフォルトで選択される値。最小値と最大値の間である必要があります。

  • 10 - ページが描画されたときのスライダのデフォルト値は10です。
Step(Decimal型): オプション 各間隔の増分値。スライダが目盛りの単位で移動します。

  • 空白 - スライダが1目盛りずつ増加します。これがデフォルト値です。
  • 10 - スライダが10目盛りずつ増加します。
ShowPips(Boolean型): オプション Trueの場合、スライダの下に目盛りが表示されます。これがデフォルト値です。Falseの場合、目盛りは表示されません。
PipsStepNumber(Integer型): オプション 目盛りの間隔の数を設定します。このプロパティは、ShowPipsプロパティがTrueに設定されているときにのみ適用されます。
IsVertical(Boolean型): オプション Trueの場合、スライダが縦方向になります。Falseの場合、スライダが横方向になります。
VerticalHeight(Integer型): オプション IsVerticalがTrueの場合、このプロパティを使用してスライダの高さ(ピクセル単位)を設定します。

  • 空白 - スライダの高さが100pxになります。これがデフォルト値です。
  • 250 - スライダの高さが250pxになります。
IsDisabled(Boolean型): オプション Trueの場合、スライダが無効になります。Falseの場合、スライダが有効になります。これがデフォルト値です。
ExtendedClass(Text型): オプション Range Slider UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。



  • 空白 - カスタムスタイルを追加しません(デフォルト値)。
  • "myclass" - 適用されるRange Slider UIのスタイルに_myclass_というスタイルを追加します。
  • "myclass1" "myclass2" - 適用されるRange Slider UIのスタイルに_myclass1_というスタイルと_myclass2_というスタイルを追加します。
AdvancedFormat(Text型): オプション 入力パラメータによって提供されるオプションのほかに、追加オプションを使用できます。詳細については、noUiSliderライブラリをご覧ください。

  • { pips: { density: 1 } }
  • Was this article helpful?