Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

モバイルアプリとリアクティブWebアプリにのみ適用されます

 

 

OutSystems

Range Slider Interval

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

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

この例では、ユーザーが1~50の価格範囲を選択できる間隔範囲スライダを作成します。

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

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

  2. ツールボックスからRange Slider Intervalウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグし、[Properties]タブで、MinValueMaxValueInitialIntervalStartInitialIntervalEndの各値を入力します。この例では、静的な値を追加しています。

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

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

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

  5. 各Expressionの変数を作成するため、画面名を右クリックして[Add Local Variable]を選択し、[Properties]タブで名前とデータ型を入力します。この例では、Currencyデータ型のLowerPrice変数とHighestPrice変数を作成しています。

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

  7. IntervalEnd入力パラメータについて手順6を繰り返します。

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

  9. Assignアクションの変数と値の割り当てを設定します。

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

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

プロパティ

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

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

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

  • 10 - ページが描画されたときのスライダのデフォルトの開始値は10です。
InitialIntervalEnd ページが描画されたときにデフォルトで選択される終了値。最小値と最大値の間である必要があります。

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

  • 空白 - スライダが1目盛りずつ増加します。これがデフォルト値です。
  • 10 - スライダが10目盛りずつ増加します。
ShowPips(Boolean型):オプション Trueの場合、スライダの下に目盛りが表示されます。これがデフォルト値です。Falseの場合、目盛りは表示されません。
PipsStep(Integer型):オプション 目盛りを描画した後の範囲の間隔(ShowPipsが有効になっている場合)。指定されていない場合は、コンポーネントによってデータに適するステップが推測されます。
ChangeEventDuringSlide(Boolean型):オプション スライダのドラッグ中に変更イベントをトリガーします。Falseに設定されている場合、ユーザーがスライダを離したときにのみ変更イベントがトリガーされます。 ヒント: スライダの値に基づいてクエリを更新する場合、このプロパティをFalseに設定することを推奨します。
IsDisabled(Boolean型):オプション Trueの場合、スライダが無効になります。Falseの場合、スライダが有効になります。これがデフォルト値です。
IsVertical(Boolean型):オプション Trueの場合、スライダが縦方向になります。Falseの場合、スライダが横方向になります。
VerticalHeight(Integer型):オプション IsVerticalがTrueの場合、このプロパティを使用してスライダの高さ(ピクセル単位)を設定します。

  • 空白 - スライダの高さが100pxになります。これがデフォルト値です。
  • 250 - スライダの高さが250pxになります。
AdvancedFormat(Text型):オプション 入力によって提供されるもの以外の追加オプションを使用できます。詳細については、https://kimmobrunfeldt.github.io/pro...bar.js/をご覧ください。例: { easing: 'bounce' }
  • Was this article helpful?