syncfusion-wpf-range-slider

Syncfusion WPF Range Slider の実装

Syncfusion WPF Range Slider（SfRangeSlider）は、定義された最小値と最大値の範囲内で、ユーザーが値または値の範囲を選択できる多機能コントロールです。デュアルつまみでの選択、目盛り、ラベル、ツールチップ、カスタマイズ、タッチ／ジェスチャーのサポート、さまざまな方向オプションに対応しています。

このスキルを使用する場面

次のような場合に、このスキルを使用してください。

• WPF アプリケーションに範囲スライダーコントロールを実装する
• 2 つのつまみを使って値の範囲をユーザーが選択できるようにする
• 目盛りとスナップ動作を備えたスライダーを作成する
• スライダーに値ラベルまたはカスタムラベルを表示する
• 書式設定された値をツールチップで表示する
• スライダーの外観（つまみ、トラック、目盛り）をカスタマイズする
• 検証機能（ThumbInterval）を使って範囲選択を処理する
• タッチ操作やジェスチャーベースの操作に対応する
• 垂直方向または逆方向のスライダーを実装する
• 次のイベントに応じて範囲値の変更に対応する

コンポーネントの概要

SfRangeSlider は次の機能を提供します。

• シングルまたはデュアルつまみでの選択 - 1 つの値、または 2 つのつまみで範囲を選択します
• 目盛り - スナップ動作に対応したメジャー目盛りとマイナー目盛り
• カスタムラベル - 値ラベルとカスタムラベルに対応します
• ツールチップ - 現在の値を表示するカスタマイズ可能なツールチップ
• 方向 - 方向の反転に対応した水平または垂直レイアウト
• タッチとジェスチャー - タッチ操作、キーボード操作、マウス操作を全面的にサポートします
• カスタマイズ - すべての視覚要素のスタイルを詳細に制御できます
• イベント - 範囲変更の通知とラベルカスタマイズ用のフック

ドキュメントとナビゲーションガイド

はじめに

📄 参照: references/getting-started.md

• パッケージのインストールとセットアップ
• 基本的な範囲スライダーの実装
• 最小値と最大値の設定
• 初期範囲の設定
• テーマと CSS の統合

範囲選択機能

📄 参照: references/range-selection.md

• RangeStart プロパティと RangeEnd プロパティ
• デュアルつまみモード用の ShowRange プロパティ
• 範囲全体のドラッグを可能にする AllowRangeDrag
• つまみ間の最小間隔を設定する ThumbInterval
• シングルつまみとデュアルつまみの選択モード
• 範囲値のデータバインディング

目盛りとスナップ動作

📄 参照: references/ticks-and-snapping.md

• TickFrequency と MinorTickFrequency
• TickPlacement のオプション（TopLeft、BottomRight、None）
• SnapsTo の動作（Ticks、StepFrequency、None）
• 値を増分する StepFrequency
• 目盛りの表示とカスタマイズ
• スナップ動作の例

ラベルと値の表示

📄 参照: references/labels.md

• ShowValueLabels と ShowCustomLabels
• LabelPlacement のオプション
• LabelOrientation（水平／垂直）
• 値を配置する ValuePlacement
• CustomLabels コレクション
• 動的にカスタマイズする LabelLoaded イベント
• ラベルの書式設定例

ツールチップと値の表示

📄 参照: references/tooltips.md

• ThumbToolTipPlacement（TopLeft、BottomRight、None）
• 小数点以下の桁数を設定する ThumbToolTipPrecision
• 値を書式設定する ToolTipFormat
• ToolTipDisplayMode（Always、OnFocus）
• 外観をカスタマイズする ToolTipStyle
• 高度なツールチップのカスタマイズ

中間値

📄 参照: references/intermediate-values.md

• IntermediateValue プロパティ
• IntermediateRangeStart と IntermediateRangeEnd
• 中間インジケーターの使用例
• 視覚的な表示例

カスタマイズとスタイル設定

📄 参照: references/customization.md

• ThumbStyle のカスタマイズ
• ActiveTrackStyle と InactiveTrackStyle
• 目盛りのスタイル設定（線、長さ、太さ）
• マイナー目盛りのカスタマイズ
• 視覚スタイルの包括的な例
• テーマの統合

方向と向き

📄 参照： references/orientation-and-direction.md

• Orientation プロパティ（Horizontal、Vertical）
• IsDirectionReversed プロパティ
• 表示動作の違い
• レイアウトに関する考慮事項
• RTL のサポート

ジェスチャと操作

📄 参照： references/gestures-and-interaction.md

• タップ／クリックによる移動操作に使う MoveToPoint
• タッチのサポート機能
• キーボードジェスチャ（矢印キー、Page Up／Down、Home／End）
• マウスジェスチャ
• アクセシビリティ機能

イベントとイベントハンドラー

📄 参照： references/events.md

• RangeChanged イベント
• RangeStartChanged イベント
• RangeEndChanged イベント
• LabelLoaded イベント
• イベントハンドラーの例（XAML と C#）

クイックスタートの例

基本的な範囲スライダー

<Window x:Class="RangeSliderDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:editors="clr-namespace:Syncfusion.Windows.Controls.Input;assembly=Syncfusion.SfInput.Wpf">
    
    <Grid>
        
        <editors:SfRangeSlider
            Width="400"
            Minimum="0"
            Maximum="100"
            RangeStart="20"
            RangeEnd="80"
            ShowRange="True"
            TickPlacement="BottomRight"
            TickFrequency="10"
            ShowValueLabels="True" />
    </Grid>
</Window>

using Syncfusion.Windows.Controls.Input;
using System.Windows;

namespace RangeSliderDemo
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            // Create range slider programmatically
            SfRangeSlider rangeSlider = new SfRangeSlider()
            {
                Width = 400,
                Minimum = 0,
                Maximum = 100,
                RangeStart = 20,
                RangeEnd = 80,
                ShowRange = true,
                TickPlacement = TickPlacement.BottomRight,
                TickFrequency = 10,
                ShowValueLabels = true
            };

            // Add to container
            this.Content = rangeSlider;
        }
    }
}

一般的なパターン

パターン 1：価格帯フィルター

<editors:SfRangeSlider
    Width="350"
    Minimum="0"
    Maximum="1000"
    RangeStart="100"
    RangeEnd="500"
    ShowRange="True"
    TickFrequency="100"
    TickPlacement="BottomRight"
    ShowValueLabels="True"
    ToolTipFormat="C0"
    ThumbToolTipPlacement="TopLeft"
    SnapsTo="Ticks"
    RangeChanged="PriceRangeSlider_RangeChanged" />

パターン 2：微調整機能付きボリュームコントロール

<editors:SfRangeSlider
    Width="300"
    Minimum="0"
    Maximum="100"
    Value="50"
    TickFrequency="10"
    MinorTickFrequency="2"
    TickPlacement="BottomRight"
    SnapsTo="StepFrequency"
    StepFrequency="5"
    ShowValueLabels="True"
    ThumbToolTipPlacement="TopLeft"
    ToolTipFormat="N0" />

パターン 3：日付範囲セレクター

<editors:SfRangeSlider
    Width="450"
    Minimum="0"
    Maximum="11"
    RangeStart="2"
    RangeEnd="8"
    ShowRange="True"
    ShowCustomLabels="True"
    TickFrequency="1"
    TickPlacement="BottomRight"
    SnapsTo="Ticks">
    <editors:SfRangeSlider.CustomLabels>
        <editors:LabelItem Content="Jan" Position="0"/>
        <editors:LabelItem Content="Feb" Position="1"/>
        <editors:LabelItem Content="Mar" Position="2"/>
        <editors:LabelItem Content="Apr" Position="3"/>
        <editors:LabelItem Content="May" Position="4"/>
        <editors:LabelItem Content="Jun" Position="5"/>
        <editors:LabelItem Content="Jul" Position="6"/>
        <editors:LabelItem Content="Aug" Position="7"/>
        <editors:LabelItem Content="Sep" Position="8"/>
        <editors:LabelItem Content="Oct" Position="9"/>
        <editors:LabelItem Content="Nov" Position="10"/>
        <editors:LabelItem Content="Dec" Position="11"/>
    </editors:SfRangeSlider.CustomLabels>
</editors:SfRangeSlider>

パターン 4：垂直温度スライダー

<editors:SfRangeSlider
    Height="300"
    Minimum="-10"
    Maximum="50"
    Value="22"
    Orientation="Vertical"
    TickFrequency="10"
    TickPlacement="TopLeft"
    ShowValueLabels="True"
    ThumbToolTipPlacement="TopLeft"
    ToolTipFormat="N0"
    IsDirectionReversed="False" />

パターン 5：カスタムカラーのスタイル付き範囲スライダー

<Window.Resources>
    
    <Style x:Key="CustomThumbStyle" TargetType="Thumb">
        <Setter Property="Width" Value="20"/>
        <Setter Property="Height" Value="20"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Thumb">
                    <Ellipse Fill="#FF4CAF50" 
                             Stroke="#FF2E7D32" 
                             StrokeThickness="2"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<editors:SfRangeSlider
    Width="400"
    Minimum="0"
    Maximum="100"
    RangeStart="30"
    RangeEnd="70"
    ShowRange="True"
    ThumbStyle="{StaticResource CustomThumbStyle}"
    ActiveTickStroke="#FF4CAF50"
    TickStroke="#FFBDBDBD"
    TickPlacement="BottomRight"
    TickFrequency="10" />

主なプロパティ

範囲と値

• Minimum - スライダーの最小値（既定値：0）
• Maximum - スライダーの最大値（既定値：100）
• RangeStart - 選択範囲の開始値
• RangeEnd - 選択範囲の終了値
• ShowRange - 範囲選択用のデュアルつまみモードを有効にします
• AllowRangeDrag - 選択範囲全体をドラッグできるようにします
• ThumbInterval - つまみ間の最小間隔

目盛り

• TickFrequency - 主目盛りの間隔
• MinorTickFrequency - 補助目盛りの間隔
• TickPlacement - 目盛りの位置（TopLeft、BottomRight、None）
• SnapsTo - スナップ動作（Ticks、StepFrequency、None）
• StepFrequency - スナップ時の増分値

ラベル

• ShowValueLabels - 数値ラベルを表示します
• ShowCustomLabels - カスタムラベルを表示します
• CustomLabels - カスタムラベル項目のコレクション
• LabelPlacement - ラベルの位置
• LabelOrientation - ラベルテキストの向き
• ValuePlacement - 値表示の位置

ツールチップ

• ThumbToolTipPlacement - ツールチップの位置（TopLeft、BottomRight、None）
• ThumbToolTipPrecision - ツールチップの小数点以下の桁数
• ToolTipFormat - ツールチップの値の書式文字列
• ToolTipDisplayMode - ツールチップを表示するタイミング（Always、OnFocus）
• ToolTipStyle - ツールチップのカスタムスタイル

レイアウト

• Orientation - 水平または垂直
• IsDirectionReversed - 値の方向を反転します

操作

• MoveToPoint - クリック／タップした位置につまみを移動します

スタイル設定

• ThumbStyle - つまみコントロールのカスタムスタイル
• ActiveTrackStyle - アクティブなトラック領域のスタイル
• InactiveTrackStyle - 非アクティブなトラック領域のスタイル
• ActiveTickStroke - アクティブな目盛りの色
• TickStroke - 目盛りの色

イベント

RangeChanged

RangeStart または RangeEnd の値が変わったときに発生します。開始値と終了値の両方について、変更前と変更後の値を提供します。

RangeStartChanged

RangeStart の値が変わったときに発生します。開始値の変更前と変更後の値を提供します。

RangeEndChanged

RangeEnd の値が変わったときに発生します。終了値の変更前と変更後の値を提供します。

LabelLoaded

スライダーのラベルが作成されたときに発生します。ラベルの内容を動的にカスタマイズできます。

一般的なユースケース

1. 価格範囲フィルター - 最低価格と最高価格を選択して、EC 商品を絞り込みます
2. 日付範囲の選択 - カスタムラベルを使用して、カレンダーまたはタイムラインの範囲を選択します
3. 音量／明るさのコントロール - メディアプレーヤーやシステム設定に使用します
4. 温度コントロール - 垂直スライダーを使用する HVAC や科学分野のアプリケーションに使用します
5. データの絞り込み - データ範囲を選択する分析ダッシュボードに使用します
6. 年齢範囲フィルター - 人口統計情報やユーザープロファイルの絞り込みに使用します
7. ズームレベルのコントロール - 正確な刻み幅で地図や画像をズームします
8. 予算の割り当て - 範囲制約のある金融アプリケーションに使用します
9. 時間範囲の選択 - スケジュールやタイムラインのアプリケーションに使用します
10. 測定範囲 - 科学分野や産業分野のアプリケーションに使用します

ベストプラクティス

1. 適切な TickFrequency を設定する - 刻み幅をデータの粒度に合わせます
2. 離散値には SnapsTo を使用する - 離散データの UX を向上させるため、スナップ機能を有効にします
3. ツールチップを適切に書式設定する - データ型（通貨、パーセンテージなど）に合わせて ToolTipFormat を使用します
4. ThumbInterval を検討する - サム間の最小間隔を設定して、無効な範囲を防ぎます
5. 数値以外のデータには CustomLabels を使用する - カテゴリ別または日付ベースの範囲で UX が向上します
6. RangeChanged イベントを処理する - 連動する UI を更新するか、範囲選択を検証します
7. 適切な向きを選ぶ - 垂直スライダーは高さ、温度、音量のコントロールに適しています
8. 一貫したスタイルを適用する - サムとトラックの色をアプリケーションのテーマに合わせます
9. 視覚的なフィードバックを提供する - ShowRange とツールチップを使用して、現在の選択範囲を表示します
10. アクセシビリティを考慮する - キーボード操作とスクリーンリーダーのサポートを確保します

関連コンポーネント

• SfDateTimeRangeNavigator - チャートで日付／時刻の範囲を選択するために使用します
• SfSlider - 単一値のスライダーです（デュアルサムが不要な場合）
• NumericUpDown - 数値を正確に入力するために使用します
• DatePicker - 範囲指定なしで日付を選択するために使用します

インストール

# Install via NuGet Package Manager
Install-Package Syncfusion.SfInput.WPF

# Or via .NET CLI
dotnet add package Syncfusion.SfInput.WPF

XAML に XML 名前空間を追加します：

xmlns:editors="clr-namespace:Syncfusion.Windows.Controls.Input;assembly=Syncfusion.SfInput.Wpf"

追加リソース

• Syncfusion WPF 範囲スライダーのドキュメント
• API リファレンス
• ライセンス情報