Power Apps の スライダー コントロール

ハンドルをドラッグすることによりユーザーが値を指定できるコントロールです。

内容

ユーザーは、選択した方向に基づいて、スライダーのハンドルを左右または上下にドラッグして、指定された最小値と最大値の間の値を指定できます。

主要なプロパティ

Default – ユーザーが変更する前のコントロールの初期値です。

Max – ユーザーがスライダーまたは評価を設定できる最大値です。

Min – ユーザーがスライダーを設定できる最小値です。

Value – 入力コントロールの値です。

追加のプロパティ

AccessibleLabel – スクリーン リーダー用のラベル。

BorderColor – コントロールの境界線の色。

BorderStyle – コントロールの境界線が実線、破線、点線、またはなしかどうか。

BorderThickness – コントロールの境界線の太さ。

DisplayMode – コントロールがユーザー入力を許可するか (編集)、データのみを表示するか (表示)、または無効にするか (無効) どうか。

DisabledBorderColor – コントロールの DisplayMode プロパティが無効に設定されている場合のコントロールの境界線の色。

FocusedBorderColor – コントロールがフォーカスされているときのコントロールの境界線の色。

FocusedBorderThickness – コントロールがフォーカスされているときのコントロールの境界線の太さ。

HandleActiveFill – ユーザーが値を変更しているときのスライダーのハンドルの色です。

HandleFill – トグルまたはスライダー コントロールのハンドル (位置が変わる要素) の色です。

HandleHoverFill – スライダーのハンドルにユーザーがマウス ポインターを重ねているときのハンドルの色です。

HandleSize – ハンドルの直径。

Height – コントロールの上端と下端間の距離。

HoverBorderColor – ユーザーがコントロール上にマウス ポインターを重ねているときのコントロールの境界線の色。

Layout – ユーザーがギャラリーをスクロールしたりスライダーを調整したりする方向です。上下 (Vertical) または左右 (Horizontal) から選択します。

OnChange – ユーザーが (スライダーを調整するなどして) コントロールの値を変更したときに実行するアクション。

OnSelect – ユーザーがコントロールをタップまたはクリックしたときに実行するアクション。

PressedBorderColor – ユーザーがコントロールをタップまたはクリックしたときのコントロールの境界線の色。

RailFill – 値が false の場合のトグル コントロール内の四角形の背景色、またはスライダー コントロールのハンドルの右側の線の色です。

RailHoverFill – 値が false の場合に、トグル コントロールまたはスライダーをポイントしたときの、トグル コントロール内の四角形の背景色、またはスライダー コントロールのハンドルの右側の線の色です。

ReadOnly – ユーザーがスライダーまたは評価コントロールの値を変更できるかどうかを指定します。

Reset – コントロールを既定値に戻すかどうかを指定します。

ShowValue – ユーザーがスライダーまたは評価の値を変更するか、ポインタをコントロールに合わせたときにその値を表示するかどうかを指定します。

TabIndex – 他のコントロールに関連するキーボード ナビゲーションの順序。

Tooltip – ユーザーがコントロールにカーソルを置くときに表示される説明テキスト。

ValueFill – 値が true の場合の、トグル コントロール内の四角形の背景色、またはスライダー コントロールのハンドルの左側の線の色です。

ValueHoverFill – 値が true の場合に、トグル コントロールまたはスライダーにポインターを合わせたときの、トグル コントロール内の四角形の背景色、またはスライダー コントロールのハンドルの左側の線の色です。

Visible – コントロールが表示されるか非表示になるか。

Width – コントロールの左端と右端間の距離。

X – コントロールの左端とその親コンテナー (親コンテナーがない場合は画面) の左端間の距離。

Y – コントロールの上端とその親コンテナー (親コンテナーがない場合は画面) の上端間の距離。

関連する関数

Sum( Value1, Value2 )

例

1. ボタンを追加し、OnSelect プロパティを次の数式に設定します。
   ClearCollect(CityPopulations, {City:"London", Country:"United Kingdom", Population:8615000}, {City:"Berlin", Country:"Germany", Population:3562000}, {City:"Madrid", Country:"Spain", Population:3165000}, {City:"Rome", Country:"Italy", Population:2874000}, {City:"Paris", Country:"France", Population:2273000}, {City:"Hamburg", Country:"Germany", Population:1760000}, {City:"Barcelona", Country:"Spain", Population:1602000}, {City:"Munich", Country:"Germany", Population:1494000}, {City:"Milan", Country:"Italy", Population:1344000})

   コントロールの追加、名前付け、構成 についてはこちらをご覧ください。

   ClearCollect 関数または その他の関数 については各関連記事を参照してください。

2. F5 キーを押し、ボタンを選択して Esc キーを押します。

3. スライダーを追加し、ボタンの下に移動させて、スライダーに MinPopulation と名前を付けます。

4. スライダーの Max プロパティを 5000000、Min プロパティを 1000000 に設定します。

5. テキスト ギャラリーを垂直方向 (縦向き) で追加して、スライダーの下に移動し、ギャラリーの Items プロパティを次の数式に設定します。
   Filter(CityPopulations, Population > MinPopulation)

6. ギャラリーの最初の項目で、上のラベルの Text プロパティを ThisItem.City に、下のラベルの Text プロパティを次の数式に設定します。
   Text(ThisItem.Population, "##,###")

7. F5 キーを押して、MinPopulation を調整し、指定した値よりも人口が多い都市のみを表示します。

8. 既定のワークスペースに戻るには、Esc キーを押します。

アクセシビリティ ガイドライン

色のコントラスト

次の間には適切な色のコントラストが必要です:

• ValueFill および RailFill
• ValueHoverFill および RailHoverFill
• FocusedBorderColor およびコントロールの外側の色
• ValueFill および背景色
• RailFill および背景色
• ValueHoverFill および背景色
• RailHoverFill および背景色

スクリーン リーダー サポート

• AccessibleLabel が存在する必要があります。

キーボードのサポート

• TabIndex を 0 以上にして、キーボード ユーザーがそこに移動できるようにする必要があります。
• フォーカス インジケーターは明確に表示する必要があります。 これを実現するには FocusedBorderColor および FocusedBorderThickness を使用します。
• キーボードと対話するときに、スライダーの値を表示する必要があります。 これは、次のいずれかの方法で実現できます。
  • ShowValue を true に設定します。
  • ラベル をスライダーに隣接するように追加します。 スライダーの Value にラベルの Text を設定します。