Slider Inputs

Slider はトラック上のサムをドラッグして値を選択するコントロールです。音量・ズームレベル・不透明度などの連続または段階的な値選択に使われます。目盛り表示やスナップ、選択範囲のハイライトをサポートします。

概要

WPF の Slider は RangeBase を継承したコントロールで、ProgressBar と同じ Minimum、Maximum、Value プロパティを持ちます。サムをドラッグして値を設定し、Value を ViewModel にバインドするのが標準的な MVVM パターンです。

IsSnapToTickEnabled="True" と TickFrequency を組み合わせることで、値を目盛りに吸着させて段階的な選択にできます。Ticks プロパティに DoubleCollection を設定すると、均等間隔でなく任意の位置に吸着点を設定できます。

目盛り表示は TickPlacement で制御します。TopLeft は上側（水平）または左側（垂直）、BottomRight は下側または右側、Both は両側に表示します。

AutoToolTipPlacement を設定すると、ドラッグ中にサム近くに現在の値をツールチップ表示できます。AutoToolTipPrecision で小数点以下の桁数を指定します。

画面キャプチャ

デモしているプロパティ

以下のプロパティが WPF 標準コントロールデモアプリでインタラクティブにデモされています。

プロパティ	設定値	説明
`Minimum / Maximum / Value (RangeBase)`	`double`	音量（0〜100）・ズーム（10〜400%）・不透明度（0.0〜1.0）など連続した値範囲の入力コントロールが必要な場面で使用します。Value は常に Minimum〜Maximum の範囲にクランプされ、範囲外の値を設定しても自動的に境界値に丸められます。Maximum < Minimum という不正な設定をすると検証エラーが発生します。また動的にバインドする場合は Minimum を先に設定してから Maximum を設定するか同時に設定するよう注意してください。
`Orientation`	`Horizontal / Vertical`	音量スライダーのような水平操作には Horizontal を、縦型ミキサーパネルや縦方向の値スケールには Vertical を使用します。Horizontal ではサムが左右に動き左端が Minimum・右端が Maximum になります。Vertical ではサムが上下に動き、デフォルトでは下端が Minimum・上端が Maximum です。Vertical の場合に値が上から下に増加してほしい場合は IsDirectionReversed=True を設定してください。
`SmallChange / LargeChange`	`double`	キーボードアクセシビリティを確保するために、矢印キーと PageUp/PageDown の増減量を適切なドメイン単位で設定します。SmallChange は矢印キー（←→または↑↓）で変化する量、LargeChange は PageUp/PageDown で変化する量です。SmallChange や LargeChange を Maximum と Minimum の差に近い大きな値に設定すると、キーボードによる精密な調整が困難になります。音量なら SmallChange=1・LargeChange=10 のようにドメインに合った値を設定してください。
`IsDirectionReversed`	`bool`	温度計（熱い方を上にしたい）・縦型音量つまみ（大音量を上に）など、大きい値を視覚的に上または左端に表示したい場合に使用します。True にすると水平では右端が Minimum・左端が Maximum、垂直では上端が Minimum・下端が Maximum になります。IsDirectionReversed を True にしても目盛りラベル（Ticks）の表示位置はトラックに連動して逆転しないため、カスタムの目盛りラベルが必要な場合は DataTemplate を使ったカスタム実装が必要です。
`TickPlacement`	`None / TopLeft / BottomRight / Both`	段階的な値選択が重要なスライダー（音量の 0/25/50/75/100 など）で視覚的な目盛りを表示したい場合に使用します。TopLeft は水平スライダーの上側・垂直スライダーの左側、BottomRight は逆側、Both は両側に表示してコントロールの高さが増します。目盛りはあくまで視覚的なガイドであり、値のスナップ動作は TickPlacement ではなく IsSnapToTickEnabled で制御します。TickPlacement を設定しても自動でスナップは有効になりません。
`TickFrequency`	`double`	IsSnapToTickEnabled=True と組み合わせて均等間隔の目盛りでスナップを実現したい場合や、等間隔の目盛り線を表示したい場合に使用します。指定した間隔ごとに目盛りが表示され、IsSnapToTickEnabled=True の場合は同じ間隔でスナップします。TickFrequency が (Maximum - Minimum) を均等に割り切れない場合、最後の目盛りが Maximum に届かないことがあります（例：Minimum=0、Maximum=100、TickFrequency=30 の場合、目盛りは 0, 30, 60, 90 となり 100 には目盛りが表示されません）。
`IsSnapToTickEnabled`	`bool`	整数値のみ、または特定の刻み値のみ選択可能にしたい場合に使用します（例：フォントサイズ 8/9/10/11/12/14/16 など）。True にするとサムを離した時点で最も近い目盛り位置（TickFrequency または Ticks プロパティの値）に値が吸着し、正確な値の選択が容易になります。TickFrequency=1 で範囲が 0〜100 の場合、スナップにより整数値のみ選択可能になり 0.5 のような小数値の選択が完全にブロックされます。細かい浮動小数点値が必要なシナリオでは IsSnapToTickEnabled=False を維持してください。
`AutoToolTipPlacement`	`None / TopLeft / BottomRight`	ドラッグ中に現在の値を視覚的にフィードバックしたい場合に使用します（音量・ズーム・不透明度など数値の確認が操作の助けになる場面）。TopLeft は水平スライダーの上・垂直スライダーの左、BottomRight は逆側にドラッグ中のみツールチップを表示します。AutoToolTipPrecision による小数点桁数の制御のみで、単位の追加や完全なカスタムフォーマット（例：「50%」「120bpm」）は設定できません。カスタム表示が必要な場合は AutoToolTipPlacement=None にして Value にバインドした別の TextBlock を配置してください。
`AutoToolTipPrecision`	`int`	AutoToolTipPlacement を設定した際に、ツールチップに表示する小数点以下の桁数を指定するために使用します。設定した桁数で値が表示され（0 なら整数のみ、2 なら小数点以下2桁）、AutoToolTipPrecision=0 で整数のみ表示にすることで UI がすっきりします。AutoToolTipPrecision=0 を設定すると範囲に小数値が含まれていても整数で表示されます。IsSnapToTickEnabled=False の場合は実際の Value に小数値が設定されていても整数表示になるため、表示と内部値が食い違う場合があります。

XAML 使用例

<Slider Minimum="0" Maximum="100"
        Value="{Binding Volume, Mode=TwoWay,
               UpdateSourceTrigger=PropertyChanged}"
        Orientation="Horizontal"
        TickPlacement="BottomRight" TickFrequency="10"
        IsSnapToTickEnabled="True"
        AutoToolTipPlacement="TopLeft" AutoToolTipPrecision="0"
        SmallChange="1" LargeChange="10"
        Width="300" />

<!-- 方向を逆にした垂直スライダー -->
<Slider Orientation="Vertical" Minimum="0" Maximum="1"
        Value="{Binding Opacity, Mode=TwoWay}"
        IsDirectionReversed="True" Height="200" />

主な使用例

音量・オーディオコントロール — スピーカーの音量やバランスを直感的に調整する UI に使用します。
ズームコントロール — 地図・画像・ドキュメントのズームレベルをスライダーで調整します。
カラーピッカー — R・G・B チャンネルを 3 本のスライダーで調整するカスタムカラーピッカーを実装します。
メディアタイムライン — 動画の再生位置をスライダーで表示・シークします。
不透明度調整 — 要素の Opacity を Slider の Value にバインドしてリアルタイムプレビューします。

ヒントとベストプラクティス

UpdateSourceTrigger=PropertyChanged でリアルタイム更新 — 標準のバインドはフォーカスを失ったときに更新されます。ドラッグ中にリアルタイム更新するには Value="{Binding Volume, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" のように設定します。ViewModel 側の処理が重い場合はドラッグのパフォーマンスに影響するため、Throttle 処理の導入も検討してください。
カスタム値表示を Slider の上に重ねる — AutoToolTipPlacement のフォーマットが不十分な場合は、Grid を使って Slider の上に TextBlock を配置し Value にバインドして「50%」「120bpm」のようなカスタムフォーマットで現在値を表示します。StringFormat や IValueConverter を活用するとさらに柔軟な表示が可能です。
連続値には目盛り吸着を無効に — 0.0〜1.0 の不透明度のような連続値では IsSnapToTickEnabled=False、TickPlacement=None が自然な操作感を提供します。
SmallChange/LargeChange をドメイン単位に合わせる — キーボード操作のためにドメインに合った増減量を設定します（1音量単位、5%ズームなど）。大きすぎる値は精密調整を妨げます。
値の範囲を ViewModel でクランプ — TextBox から同じプロパティを編集する場合、[Minimum, Maximum] の範囲内に収まるようクランプ処理を実装します。

ソースコード

このデモ画面のソースコードは GitHub で公開しています。

GitHub で Slider のソースコードを見る →