Range Slider Interval
Range Slider Intervalパターンを使用すると、ユーザーが2つの値の範囲内にある単一の値を選択することができます。このパターンを使用して、事前に定められた間隔や選択された範囲内でコンテンツを調整することができます。スライダを動かして値を増減します。
Range Slider Interval UIパターンの使用方法
この例では、ユーザーが1~50の価格範囲を選択できる間隔範囲スライダを作成します。
-
Service Studioのツールボックスで
Range Slider Interval
を検索します。Range Slider Intervalウィジェットが表示されます。
-
ツールボックスからRange Slider Intervalウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグし、[Properties]タブで、MinValue、MaxValue、InitialIntervalStart、InitialIntervalEndの各値を入力します。この例では、静的な値を追加しています。
-
OnChangeイベントを作成するため、[Properties]タブの[Handler]ドロップダウンで[New Client Action]を選択します。
デフォルトで、InitialIntervalStart入力パラメータとInitialIntervalEnd入力パラメータが作成されます。
-
ツールボックスからContainerウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグし、コンテンツを[Container]プレースホルダに追加します。この例では、各入力パラメータにテキストとExpressionを追加しています。
-
各Expressionの変数を作成するため、画面名を右クリックして[Add Local Variable]を選択し、[Properties]タブで名前とデータ型を入力します。この例では、Currencyデータ型のLowerPrice変数とHighestPrice変数を作成しています。
-
IntervalStart変数をExpressionにバインドするため、Expressionウィジェットをダブルクリックし、[Expression Value]エディタで先ほど作成した変数を選択して[Done]をクリックします。
-
IntervalEnd入力パラメータについて手順6を繰り返します。
-
パラメータが範囲スライダの選択を読み取るようにするため、クライアントアクションをダブルクリックし、ツールボックスからAssignアクションをクライアントアクションに追加します。
-
Assignアクションの変数と値の割り当てを設定します。
-
[Properties]タブで(オプションの)プロパティを設定し、範囲スライダのルックアンドフィールを変更できます。
これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。
プロパティ
プロパティ | 説明 |
---|---|
MinValue(Decimal型): 必須 | スライダの最小値。 例
|
MaxValue(Decimal型):必須 | スライダの最大値。 例
|
InitialIntervalStart | ページが描画されたときにデフォルトで選択される開始値。最小値と最大値の間である必要があります。 例
|
InitialIntervalEnd | ページが描画されたときにデフォルトで選択される終了値。最小値と最大値の間である必要があります。 例
|
Step(Decimal型):オプション | スライダが目盛りの単位で移動します。 例
|
ShowPips(Boolean型):オプション | Trueの場合、スライダの下に目盛りが表示されます。これがデフォルト値です。Falseの場合、目盛りは表示されません。 |
PipsStep(Integer型):オプション | 目盛りを描画した後の範囲の間隔(ShowPipsが有効になっている場合)。指定されていない場合は、コンポーネントによってデータに適するステップが推測されます。 |
ChangeEventDuringSlide(Boolean型):オプション | スライダのドラッグ中に変更イベントをトリガーします。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' } |