スライダー

スライダーは、ユーザーがトラックに沿ってサム コントロールを動かすことによって、値の範囲から選択できるコントロールです。

これは適切なコントロールですか?

ユーザーが定義された連続した値 (ボリュームや明るさなど) または個別の値の範囲 (画面解像度の設定など) を設定できるようにする場合は、スライダーを使用します。

スライダーは、ユーザーが値を数値ではなく相対的な数量と見なす場合に適しています。 たとえば、ユーザーは、値を 2 または 5 に設定することではなく、オーディオ ボリュームを低または中に設定することを検討します。

バイナリ設定にはスライダーを使用しないでください。 代わりにトグル スイッチを使用します。

スライダーを使用するかどうかを決定する際に考慮すべきその他の要因を次に示します。

• 設定が相対的な量のように見えるか? そうでない場合は、ラジオ ボタンまたはリスト ボックスを使用します。
• 設定は正確な既知の数値か? その場合は、数値 テキスト ボックスを使用します。
• 設定の変更による効果をすぐに確認できると、ユーザーにとって便利か? その場合は、スライダーを使用します。 たとえば、ユーザーは、色合い、彩度、明度の値に対する変化の影響をすぐに確認することで、色をより簡単に選択できます。
• 設定に 4 つ以上の値の範囲があるか? そうでない場合は、ラジオ ボタンを使用します。
• ユーザーが値を変えられるか? スライダーはユーザー操作用です。 ユーザーが値を変更できない場合は、代わりに読み取り専用テキストを使用します。

スライダーと数値テキスト ボックスのどちらを使用するかを決定する場合は、次の場合に数値テキスト ボックスを使用します。

• 画面領域が狭い。
• ユーザーはキーボードの使用を好む場合があります。

次の場合はスライダーを使用します。

• ユーザーは即座にフィードバックを得ることができます。

推奨事項

• ユーザーが目的の値を簡単に設定できるように、コントロールのサイズを変更します。 不連続値の設定の場合、ユーザーがマウスを使用して任意の値を簡単に選択できることを確認します。 スライダーの端点が常にビューの境界内に収まるようにします。
• ユーザーが選択を行っている間または後にすぐにフィードバックを送信します (実用的な場合)。 たとえば、Windows ボリューム コントロールは、選択したオーディオ ボリュームを示すためにビープ音を鳴らします。
• ラベルを使用して値の範囲を表示します。 例: スライダーが垂直方向で、上部のラベルが最大、高、多などの場合、下部の意味は明らかであるため、ラベルを省略できます。
• スライダーを無効にすると、関連付けられているすべてのラベルまたはフィードバック ビジュアルを無効にします。
• スライダーのフロー方向や向きを設定するときは、テキストの方向を考慮してください。 スクリプトは、一部の言語では左から右に、他の言語では右から左にフローします。
• 進行状況インジケーターとしてスライダーを使用しないでください。
• スライダーのつまみのサイズを既定のサイズから変更しないでください。
• 値の範囲が大きく、ユーザーが範囲からいくつかの代表的な値のいずれかを選択する可能性が最も高い場合は、連続スライダーを作成しないでください。 代わりに、許可される唯一の手順としてこれらの値を使用してください。 たとえば、時間の値が最大 1 か月であっても、ユーザーは 1 分、1 時間、1 日、または 1 か月からのみ選択する必要がある場合は、4 つのステップ ポイントのみを含むスライダーを作成します。

その他の使い方のガイダンス

適切なレイアウトの選択: 水平または垂直

スライダーの向きは水平方向または垂直方向に設定できます。 次のガイドラインを使用して、使用するレイアウトを決定します。

• 自然な向きを使用します。 たとえば、スライダーが通常垂直方向に表示される実際の値 (温度など) を表す場合は、垂直方向を使用します。
• ビデオ アプリのように、メディア内の検索にコントロールを使用する場合は、水平方向を使用します。
• ページ内で 1 方向 (水平方向または垂直方向) にパンできるスライダーを使用する場合は、パン方向とは異なる向きをスライダーに使用します。 そうしないと、ユーザーがページをパンしようとしたときに、スライダーをスワイプして誤って値を変更する可能性があります。
• 使用する向きが不明な場合は、ページ レイアウトに最適なものを使用します。

範囲の方向

範囲の方向は、スライダーを現在の値から最大値にスライドしたときに移動する方向です。

• 垂直スライダーの場合は、読み取り方向に関係なく、スライダーの上部に最大値を配置します。 たとえば、音量スライダーの場合は、常に最大音量設定をスライダーの上部に配置します。 その他の種類の値 (曜日など) については、ページの読み取り方向に従います。
• 水平スタイルの場合、左から右のページ レイアウトの場合はスライダーの左側に、右から左のページ レイアウトの場合は右側に小さい値を配置します。
• 前のガイドラインの 1 つの例外として、メディア シーク バーが挙げられます。常にスライダーの左側に小さい値を配置します。

ステップと目盛り

• スライダーで最小値から最大値の間の任意の値を許可しない場合は、ステップ ポイントを使用します。 たとえば、スライダーを使用して購入する映画のチケット数を指定する場合は、浮動小数点値を許可しないようにします。 ステップ値として 1 を指定します。
• ステップ (スナップポイントとも呼ばれます) を指定する場合は、最後のステップがスライダーの最大値と揃っていることを確認します。
• 目盛りは、測定値または有効値の位置をユーザーに表示する場合に使用します。 たとえば、ズームを制御するスライダーには、50%、100%、200% の目盛りがある場合があります。
• ユーザーが設定の概算値を知る必要がある場合は、目盛りを表示します。
• ユーザーがコントロールを操作せずに、選択した設定の正確な値を知る必要がある場合は、目盛りと値ラベルを表示します。 それ以外の場合は、値のヒントを使用して正確な値を確認できます。
• ステップ ポイントが明確でない場合は、常に目盛りを表示します。 たとえば、スライダーの幅が 200 ピクセルで、スナップポイントが 200 の場合、ユーザーはスナップ動作に気付かないため、目盛りを非表示にすることができます。 ただし、スナップ ポイントが 10 個しかない場合は、目盛りを表示します。

Labels

• スライダー ラベル

  スライダー ラベルは、スライダーの用途を示します。

  • 終了句読点のないラベルを使用します (これはすべてのコントロール ラベルの規則です)。
  • スライダーがコントロールの上にラベルの大部分を配置するフォームにある場合は、スライダーの上にラベルを配置します。
  • スライダーがコントロールの側面にラベルの大部分を配置するフォームにある場合は、ラベルを側面に配置します。
  • ユーザーがスライダーに触れると、ユーザーの指でラベルが隠れる可能性があるため、スライダーの下にラベルを配置しないでください。

• 範囲ラベル

  範囲または塗りつぶし、ラベルは、スライダーの最小値と最大値を表します。

  • 垂直方向で不要な場合を除き、スライダー範囲の両端にラベルを付けます。
  • 可能であれば、ラベルごとに 1 つの単語のみを使用します。
  • 末尾に句点を付けないでください。
  • これらのラベルが説明的で並列であることを確認します。 例: 最大/最小、多/少、低/高、小/大。

• 値ラベル

  値ラベルには、スライダーの現在の値が表示されます。

  • 値ラベルが必要な場合は、スライダーの下に表示します。
  • コントロールを基準にしてテキストの中央に配置し、単位 (ピクセルなど) を含めます。
  • スライダーのつまみはスクラブ中に隠れるため、ラベルや他の視覚効果で現在の値を表示することをお勧めします。 スライダー設定のテキスト サイズでは、スライダーの横に適切なサイズのサンプル テキストをレンダリングできます。

外観と相互作用

スライダーはトラックとサムで構成されます。 トラックは、入力可能な値の範囲を表すバー (必要に応じてさまざまなスタイルの目盛りを表示できます) です。 サムはセレクターであり、ユーザーはトラックをタップするか、トラックを前後にスクラブして配置できます。

スライダーには大きなタッチ ターゲットがあります。 タッチ アクセシビリティを維持するには、スライダーをディスプレイの端から十分離れた位置に配置する必要があります。

カスタム スライダーを設計する際は、余分な要素をできるだけなくし、ユーザーに必要なすべての情報を示す方法を検討してください。 ユーザーが設定を理解するために単位を知る必要がある場合は、値ラベルを使用します。これらの値をグラフィカルに表す創造的な方法を見つけます。 たとえば、音量を制御するスライダーでは、スライダーの最小端に音波のないスピーカー グラフィックと、最大端に音波を含むスピーカー グラフィックを表示できます。

例

0 から 100 まで 10 ポイント間隔の目盛りがあるスライダー。

UWP と WinUI 2

重要

この記事の情報と例は、Windows アプリ SDKと WinUI 3 を使用するアプリ向けに最適化されていますが、一般に WinUI 2 を使用する UWP アプリに適用されます。 プラットフォーム固有の情報と例については、UWP API リファレンスを参照してください。

このセクションには、UWP または WinUI 2 アプリでコントロールを使用するために必要な情報が含まれています。

このコントロールの API は Windows.UI.Xaml.Controls 名前空間に存在します。

• UWP API: Slider クラス、 Value プロパティ、 ValueChanged イベント
• WinUI 2 ギャラリー アプリを開いて Slider の動作を確認します。 WinUI 2 ギャラリー アプリには、ほとんどの WinUI 2 コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを入手するか、GitHub でソース コードを取得します。

最新の WinUI 2 を使用して、すべてのコントロールの最新のスタイルとテンプレートを取得することをお勧めします。 WinUI 2.2 以降には、丸みのある角を使用するこのコントロールの新しいテンプレートが含まれます。 詳しくは、「角の半径」をご覧ください。

スライダーを作成する

• 重要な API: Slider クラス、Value プロパティ、ValueChanged イベント

WinUI 3 ギャラリー アプリを開いてスライダーの動作を確認します。

WinUI 3 ギャラリー アプリには、ほとんどの WinUI 3 コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを入手するか、GitHub でソース コードを取得します。

XAML でスライダーを作成する方法を次に示します。

<Slider x:Name="volumeSlider" Header="Volume" Width="200"
        ValueChanged="Slider_ValueChanged"/>

コードでスライダーを作成する方法を次に示します。

Slider volumeSlider = new Slider();
volumeSlider.Header = "Volume";
volumeSlider.Width = 200;
volumeSlider.ValueChanged += Slider_ValueChanged;

// Add the slider to a parent container in the visual tree.
stackPanel1.Children.Add(volumeSlider);

スライダーの値は、Value プロパティから取得して設定します。 値の変更に応答するには、データ バインディングを使用して Value プロパティにバインドするか、ValueChanged イベントを処理します。

private void Slider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
{
    Slider slider = sender as Slider;
    if (slider != null)
    {
        media.Volume = slider.Value;
    }
}

サンプル コードの入手

• WinUI ギャラリー サンプル - すべての XAML コントロールを対話形式で参照できます。

関連トピック

• トグル スイッチ
• Slider クラス