範囲スライダー

レンジスライダーコンポーネントは、ユーザーが 値の範囲 をトラック上の2つのハンドルをドラッグして選択できるようにします。レンジスライダーは、データのフィルタリング、価格範囲の設定、日付範囲の指定、連続した範囲選択が必要なその他のシナリオに最適です。

概要

レンジスライダーは、ユーザーが範囲を定義するための視覚的でインタラクティブな方法を提供します。主な機能は次のとおりです：

• デュアルハンドル： ユーザーは 2つの ハンドルをドラッグして範囲の最小値と最大値を設定します。

• 設定可能な範囲： 最小値と最大値の可能な値を定義します。

• ステップサイズ： 選択の粒度を制御します（例：1、0.5、10の増分）。

• 視覚的カスタマイズ： 最小/最大値の非表示、トラックの非表示、値ピンの表示などのオプションがあります。

• 垂直／水平：垂直または水平に表示するオプション。

• 単位： 異なる単位を表示するオプション。

使用例

• 価格範囲フィルター： eコマースアプリケーションで、ユーザーが特定の価格範囲内で商品をフィルタリングできるようにします。

• 日付範囲の選択： レポートや検索の開始日と終了日をユーザーに選択させます。

• 数量範囲： ユーザーが最小値と最大値の数量を指定できるようにします。

• 評価範囲： 評価範囲に基づいて項目をフィルタリングします（例：3〜5スターの間の製品を表示）。

• 任意の連続範囲： ユーザーが連続した値の集合から範囲を選択する必要があるあらゆるシナリオ。

レンジスライダーの設定

基本プロパティ

これらのプロパティは、レンジスライダーコンポーネントの基本的なデータとラベリングを制御します。

• API名：（テキスト）このコンポーネントインスタンスの一意の識別子（例：PriceRangeSlider）。

• ラベル：（テキスト）スライダーの上または横に表示されるテキストラベル。例：「Price Range:」「Select a Date Range:」。

• フィールドレベルヘルプ：（テキスト、オプション）ラベルの横に表示されるヘルプテキストで、追加のコンテキストや指示を提供します。

• 値：（コレクション変数 - 必須）これはレンジスライダーと対話するための最も重要なプロパティです。現在選択されている範囲を保持します。

  • データバインディング：このプロパティはNumber型のコレクション変数リソースにバインドする必要があります。この変数は2つの値を格納します：

    • YourVariableName[0]：選択された範囲の最小値。

    • YourVariableName[1]：選択された範囲の最大値。

  • 例：priceRangeという名前のコレクション変数を作成した場合、レンジスライダーのValueプロパティを{!priceRange}にバインドします。すると、{!priceRange[0]}が選択された最小価格を保持し、{!priceRange[1]}が選択された最大価格を保持します。

• 複数値：（ブール - チェックボックス）有効にすると、複数の範囲値を設定できます。

範囲とステップ

これらのプロパティは許容される値の範囲と選択の増分を定義します。

• 最小（Min）：（数値）範囲の可能な最小値。

• 最大（Max）：（数値）範囲の可能な最大値。

• ステップ：（数値）選択可能な値間の増分。例えば：

  • Min：0、Max：100、Step：1：ユーザーは0〜100の任意の整数を選択できます。

  • Min：0、Max：1、Step：0.1：ユーザーは0、0.1、0.2、0.3...0.9、1のような値を選択できます。

外観と表示

これらのプロパティはレンジスライダーの視覚的な表示を制御します。

• バリアント：（テキスト - オプションから選択）ラベルの位置を制御します：

  • standard：コンポーネントの上にラベル。

  • label-inline：左にラベル。

  • label-stacked：上にラベル（standardとは異なるスタイルになる場合があります）。

  • label-hidden：ラベルを非表示にします。

• サイズ：（テキスト - オプションから選択）スライダーの全体サイズを制御します：x-small、small、medium、large、x-large。

• タイプ：（テキスト - オプションから選択）スライダーの向きを制御します。

  • horizontal

  • vertical

• 最小/最大値を非表示：（ブール - チェックボックス）有効にすると、トラックの横に最小値と最大値が表示されません。

• トラックを非表示：（ブール - チェックボックス）有効にすると、ハンドルのみが表示され、トラック自体は非表示になります。これはあまり一般的ではないオプションです。

• ピンを表示：（ブール - チェックボックス）有効にすると、各ハンドルの上に小さな「ピン」（ポップアップ）が表示され、ユーザーがドラッグしている間に現在の値を表示します。使いやすさのために推奨されます。

• 目盛りを表示：（ブール - チェックボックス）有効にすると、トラックに目盛りが表示され、（Stepプロパティによって決まる）選択可能な値を視覚的に示します。

• 目盛りスタイル：（テキスト - オプションから選択）目盛りを表示が有効になっている場合、目盛りのスタイルを選択します。

  • inner-tick

数値フォーマット（単位）

これらのプロパティにより、値に単位を追加できます。

• 単位：（テキスト）単位を追加する場合に選択します。

  • 小数（decimal）

  • 通貨（currency）

  • パーセント（percent）

  • 秒（seconds）

  • 分（minutes）

  • 時間（hours）

  • 日（days）

  • 週（weeks）

  • 月（months）

  • 年（years）

• 最大/最小 小数/有効数字/整数桁数：（数値）単位が設定されている場合、最大/最小の小数桁数や有効数字、整数桁数を設定できます。

動作 これらの設定はユーザーの操作に影響します。

• 無効（Disabled）：（ブール - チェックボックス）レンジスライダーを完全に無効化します（操作できません）。

• スワップ無効化（Disable Swap）：（ブール - チェックボックス）有効にすると、ハンドルが入れ替わって最小値と最大値が交換されることを防ぎます。

• 表示（Visible）：（ブール）レンジスライダーコンポーネントがページ上に表示されるかどうかを制御します。動的な表示にはブール変数や式にバインドします。

例：価格範囲でデータテーブルをフィルタリングする

1. priceRangeという名前のNumberコレクション変数リソースを作成します。この変数は最小選択価格と最大選択価格の2つの値を保持します。

2. レンジスライダーコンポーネントを追加します。

3. レンジスライダーを構成します：

   • API名：PriceRangeSlider

   • ラベル：「Price Range:」

   • 値：これを{!priceRange}にバインドします。

   • 最小（Min）：0

   • 最大（Max）：1000（またはあなたの最大価格）

   • ステップ（Step）：10（または希望の増分）

   • ピンを表示：これを有効にします（推奨）。

4. データテーブルコンポーネントを追加します。

5. データテーブルのクエリを構成します：

   • Avonni Query Data Sourceを使用します。

   • 製品/価格データを含むオブジェクトを選択します（例：Product2）。

   • フィルターを追加します：

     • フィルター1：Price >= {!priceRange[0]}

     • フィルター2：Price <= {!priceRange[1]}

これでユーザーがレンジスライダーを調整すると、priceRange変数が更新され、データテーブルのフィルターが再評価され、選択された価格範囲内の製品のみが自動的に表示されます。

1. インタラクション

レンジスライダーは On Change インタラクションをサポートします。これはユーザーが選択範囲を変更したとき（いずれかのハンドルをドラッグしたとき）にトリガーされます。

• On Change： このインタラクションを使用して次のことを行います：

  • データを更新（Refresh Data）： 選択された範囲を反映するようにデータテーブルや他のコンポーネントを更新します。これは主要なユースケースです。 主要（primary） ユースケース。

  • 変数の値を設定： 新しい最小値と最大値で変数リソースを更新します。（通常はValueプロパティを直接 バインド するため、これはあまり一般的ではありません）。 Value プロパティに直接）。

  • フローを実行： 選択された範囲を入力として渡してフローを起動します。

選択された値へのアクセス（インタラクション内）：

「On Change」インタラクション内では、次を使用して選択された範囲の値にアクセスできます：

@RangeSliderName.value

（ RangeSliderName を 実際の API名 に置き換えてください）。これは2つの値を持つ コレクション

• であることを忘れないでください：@RangeSliderName.value[0]

• ：最小値。@RangeSliderName.value[1]

1. ：最大値。

例

1. レンジスライダーコンポーネントを追加します。

2. 例1：価格範囲フィルター 次のように設定します ラベル

3. 例1：価格範囲フィルター を「Price Range:」に。 最小（Min） 0.

4. 例1：価格範囲フィルター を 最小（Min） 1000.

5. 例1：価格範囲フィルター 最大（Max） 最小（Min） 10.

6. 例1：価格範囲フィルター ステップ（Step） ピンを表示

7. を有効にします。 に置き換えてください）。これは2つの値を持つ 次の名前の 変数リソースを作成します priceRange

8. （Number型、初期値が2つあるもの、例：0と100）。 Value レンジスライダーの プロパティを.

9. {!priceRange}にバインドします。

10. データテーブルを追加し、クエリデータソースを設定します。 であることを忘れないでください： 値を参照するフィルターを追加します： ：最小値。

11. および On Change レンジスライダーに インタラクションを追加し、アクションを データソースの再読み込み（Refresh Data Source）

に設定し、データテーブルのデータソースを選択します。 変数リソースを作成します これでユーザーがレンジスライダーのハンドルをドラッグすると、

1. 変数が更新され、それらの値を使用してデータテーブルをフィルタリングできます。

   • 重要な考慮事項 値のバインディング： 常に Value プロパティを に置き換えてください）。これは2つの値を持つ Number値を持つ 2つの 変数リソースにバインドしてください。これが選択された範囲にアクセスして保存する方法です。

   • ステップサイズ： データとユースケースに適した 最大（Max） サイズを選択してください。

   • 最小/最大（Min/Max）： データに応じて を「Price Range:」に。 値を参照するフィルターを追加します： を の値を適切に設定してください。

   • インタラクション： 「On Change」インタラクションを使用して、選択された範囲に基づいてアクションをトリガーし、レンジスライダーを 有用に してください。

   • 単位： もしデータが特定の単位（通貨、パーセンテージなど）を表す場合は、コンポーネントのラベルや 単位 属性でそれらの単位を視覚的に示すことを検討してください。

   • 垂直（Vertical）： レンジスライダーを垂直に使用することができます。

要約：レンジスライダーはエンドユーザーが特定の範囲内で情報をフィルタリングするための視覚的コンポーネントです。Min/Maxを設定でき、目盛りを表示するかどうかなどの視覚設定も可能です。