Power Apps の Slider コントロール

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

内容

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

主要なプロパティ

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 プロパティを 5000000Min プロパティを 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 および背景色

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

キーボードのサポート

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

注意

ドキュメントの言語設定についてお聞かせください。 簡単な調査を行います。 (この調査は英語です)

この調査には約 7 分かかります。 個人データは収集されません (プライバシー ステートメント)。