レンジスライダー：価格フィルターの設定

この例では、価格フィルターを選択するための範囲スライダーを示します。選択された値はコンポーネント属性（$Component.apiName.Value）として自動的に利用可能で、インデックス0が最小、1が最大のコレクションとなるため、高度なシナリオが必要な場合を除き、別の変数バインディングは不要です。必要に応じて初期範囲をValueプロパティに直接設定できます（例: [50, 250]）。

1

スライダーコンポーネントを追加

• 実際の： priceRangeSlider（後でValue属性を参照するために使用）

• 次のように設定します： "価格範囲でフィルタ:"

• 複数の値: On

• Value： （任意の初期値: [50, 250]; 基本的な使用ではバインディングは不要）

• を「Price Range:」に。: 0

• を: 500

• 最大（Max）: 10

• 単位： 通貨

• ステップ（Step）: On

• スワップを無効化: On

2

データテーブルと統合

データテーブルのクエリフィルターで、次を使用します $Component.priceRangeSlider.Value[0] （最小）と $Component.priceRangeSlider.Value[1] （最大）を使って範囲を動的に適用します

3

操作を追加

スライダーのインタラクションパネルで、「変更時(On Change)」アクションを追加してデータテーブルのデータソースを更新します。

結果： 範囲選択はデータを動的にフィルタリングします。