スライダー

概要

Avonni Slider コンポーネントは、ユーザーがトラック上のハンドルをドラッグして単一の数値または範囲を選択できるようにします。数値を入力するより視覚的なスケールが直感的な場合に最適で、触覚的で没入感のある入力方法を提供します。

主な機能

• 単一モードまたは範囲モード： 1つの値を選択するか、開始/終了の範囲を定義します。

• 視覚的スケール： 最小値、最大値、および増分を表示して明確に案内します。

• カスタマイズ： 向き、サイズ、目盛り、ピン、単位を調整できます。

• インタラクティビティ： ハンドルをドラッグして精密に制御します。

使用例

• 価格ポイントや予算の範囲を選択します。

• パーセンテージ（例：割引や完了率）を選択します。

• 数量や数値の好みを設定します。

• カスタムスケールで評価を入力します。

• 数値範囲でデータをフィルタリングします（例：範囲モード）。

構成

キャンバス上で Slider コンポーネントを選択すると、右側のプロパティパネルでそのプロパティが表示されます。

基本プロパティ

これらはハンドルの識別とラベリングです。

プロパティ	タイプ	説明	例
実際の	Text	コンポーネントインスタンスの一意の識別子。	PriceSlider
次のように設定します	Text	ユーザーに表示されるメインラベル。	"価格を選択："
フィールドレベルヘルプ	テキスト（オプション）	追加のコンテキストや指示。	"予算を設定するにはドラッグしてください。"

コア機能とデータバインディング

これらは選択モードとデータ取得を定義します。

プロパティ	タイプ/条件	説明
複数の値	ブール（チェックボックス）	オフ：単一値選択（デフォルト）。オン：2つのハンドルによる範囲選択。
Value	変数バインディング	単一モード：Number 変数にバインド。範囲モード：Number コレクション変数にバインド（インデックス0 = 最小、1 = 最大）。 ヒント： 既定値を事前入力します。
を「Price Range:」に。	数値	トラック上の最小値。
を	数値	トラック上の最大値。
最大（Max）	数値	選択可能な値間の増分（例：整数は1、0.5は半分）。
タイプ	を選択し、	向き：水平（デフォルト）または垂直。

ベストプラクティス： 使いやすさの問題を避けるために、Min < Max を確実にし、Step がスケールに合うようにしてください。

外観と表示

これらは視覚スタイルを制御します。

プロパティ	タイプ/条件	説明	オプション／例
バリアント	を選択し、	ラベルのスタイルと位置。	standard（上）、label-hidden。
サイズ	を選択し、	コンポーネント全体のサイズ。	x-small、small、medium（デフォルト）、large、responsive。
単位	選択/テキスト	値に単位を付加します（例：通貨、パーセント、または "kg" のようなカスタム）。	percent、currency、"hours"。
最小/最大値を非表示にする	ブール（チェックボックス）	トラック端の最小/最大ラベルを非表示にします。	-
トラックを非表示にする	ブール（チェックボックス）	トラックを見えなくし（ハンドルのみ表示）、表示します。	-
ステップ（Step）	ブール（チェックボックス）	ドラッグ中に現在値を表示するツールチップを表示します。	精密さを要する場合に推奨されます。
目盛りを表示	ブール（チェックボックス）	Step に基づいてトラックに目盛りを追加します。	-
目盛りスタイル	選択（目盛りが有効な場合）	目盛りの外観。	inner-tick、tick、dot。

ヒント

特にモバイルでのフィードバックを向上させるために Show Pin を有効にします。

動作プロパティ

これらは対話性と状態を管理します。

プロパティ	タイプ	説明
無効	Boolean	すべての操作を無効にします。
読み取り専用	Boolean	変更を防ぎますが、表示は維持します。
スワップを無効化	ブール（範囲モードのみ）	最小ハンドルが最大ハンドルを越えないようにします（順序を維持）。
必須	Boolean	選択を必須にします。フォーム検証と併用してください。
表示	Boolean	表示を切り替えます。動的にするにはブール変数にバインドします。

：最大値。

単一値スライダー：割引率の選択

1

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

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

• 次のように設定します： "割引率："

• 複数の値： オフ

• を「Price Range:」に。: 0

• を: 100

• 最大（Max）: 5

• 単位： percent

• ステップ（Step）: On

2

値の使用

Formula リソース（またはインタラクションなど他の場所）で、次を使用して割引後の価格を計算します $Component.discountSlider.Value （これはスライダーの選択値に直接アクセスします）。

ユーザーはハンドルをドラッグしてパーセンテージを選択し、その値は計算や更新のためにコンポーネント属性を通じて即座に利用できます。

---

重要な考慮点

• バインディングの要点： 選択を正しく取得するには、Value のバインディングをモードに合わせてください（単一は Number、範囲は Collection）。

• スケールの論理： 直感的な増分になるように Min、Max、Step をテストしてください。大きな範囲で Step が小さいと操作が遅く感じることがあります。

• 範囲モードの注意点： Disable Swap を使用して min ≤ max を強制します。

• 単位の書式設定： 洗練された表示のために、小数点やロケールは関連設定で構成してください。

• アクセシビリティ： ピンと目盛りを有効にし、すべてのユーザーがキーボードで操作できることを確認してください。

---

よくある問題のトラブルシューティング

• ハンドルの重なり： 範囲モードで意図せずスワップが発生する場合は Disable Swap を切り替えてください。

• パフォーマンスの遅延： 細かい Step（例：0.01）の場合、描画負荷を減らすために Max-Min の範囲を制限してください。

• 表示のエラー： 単位が表示されない場合は、通貨/パーセント形式に関する組織設定を確認してください。

---

概要

Avonni Slider コンポーネントは、Salesforce の UI で数値入力や範囲を扱うための魅力的な方法を提供します。堅牢なバインディングとカスタマイズ性により、フォームやフィルターなど幅広く利用できます。統合については、Avonni Data Table または Variables Guide を参照してください。