syncfusion-winforms-range-slider

Syncfusion Windows Forms Range Slider の実装

Windows Forms アプリケーションに RangeSlider コントロールを実装するための完全ガイドです。RangeSlider は、2 つのつまみを備えた柔軟な UI コンポーネントです。つまみをトラック上で動かすことで、ユーザーは値の範囲から選択できます。

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

以下のような場合に、このスキルを使用します。

• 2 つのつまみで範囲選択 UI を作成する（最小値と最大値を指定）
• 範囲の上下限を設定する（最小値と最大値のプロパティを使用）
• 色、サイズ、目盛りの表示をカスタマイズする
• SliderMin プロパティと SliderMax プロパティを使用して、スライダーの初期位置を設定する
• ユーザー操作に応じた範囲選択イベントを処理する
• 異なる向き（水平または垂直のレイアウト）に対応する
• Windows Forms アプリケーションに操作可能な範囲コントロールを追加する

コンポーネントの概要

RangeSlider コントロールには、次の機能があります。

• 最小値と最大値を個別に選択できる 2 つのつまみ
• Minimum プロパティと Maximum プロパティで設定できる範囲の上下限
• トラック、範囲、つまみの各要素の色をカスタマイズ
• 表示頻度を設定できる目盛り
• 柔軟なレイアウトに対応する水平および垂直の向き
• スクロールや値変更の操作を処理するイベント
• つまみの間にある選択範囲を視覚的に強調表示

ナビゲーションガイド

はじめに

📄 参照先： references/getting-started.md

• アセンブリの配置と NuGet によるインストール
• デザイナーからの追加
• コードからの追加（C# および VB.NET の例）
• 最小値と最大値による基本設定

値の設定

📄 参照先： references/value-configuration.md

• SliderMin と SliderMax の位置の設定
• Minimum と Maximum の上下限の設定
• Range プロパティの理解
• 実践的な値設定の例

インタラクティブ機能

📄 参照先： references/interactive-features.md

• トラックの色と高さのカスタマイズ
• 範囲の色による強調表示
• つまみの色の設定
• スライダーサイズの調整
• 目盛りの表示と頻度の設定
• イベント処理（Scroll イベントと ValueChanged イベント）

レイアウトと向き

📄 参照先： references/layout-orientation.md

• 水平と垂直の向き
• 右から左（RTL）への対応
• Orientation プロパティの使用方法
• レイアウトに関する考慮事項とベストプラクティス

クイックスタートの例

以下は、RangeSlider をすぐに使い始めるための最小限の例です。

using Syncfusion.Windows.Forms.Tools;
using System.Windows.Forms;

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
        
        // Create RangeSlider instance
        RangeSlider rangeSlider = new RangeSlider();
        
        // Configure range bounds
        rangeSlider.Minimum = 0;
        rangeSlider.Maximum = 100;
        
        // Set initial thumb positions
        rangeSlider.SliderMin = 20;
        rangeSlider.SliderMax = 80;
        
        // Show value labels
        rangeSlider.ShowLabels = true;
        
        // Display ticks
        rangeSlider.ShowTicks = true;
        rangeSlider.TickFrequency = 10;
        
        // Add to form
        this.Controls.Add(rangeSlider);
    }
}

よくあるパターン

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

表示形式をカスタマイズした価格帯セレクターを作成します。

rangeSlider.Minimum = 0;
rangeSlider.Maximum = 1000;
rangeSlider.SliderMin = 100;
rangeSlider.SliderMax = 900;

rangeSlider.ValueChanged += (s, e) =>
{
    decimal minPrice = rangeSlider.SliderMin;
    decimal maxPrice = rangeSlider.SliderMax;
    // Update product list based on price range
};

パターン 2：カスタムのビジュアルスタイル

視覚的なフィードバックのために色をカスタマイズします。

// Set distinct colors for visual hierarchy
rangeSlider.ChannelColor = Color.LightGray;      // Background track
rangeSlider.RangeColor = Color.DarkGreen;        // Selected range
rangeSlider.ThumbColor = Color.Green;            // Thumb controls

// Adjust sizing
rangeSlider.ChannelHeight = 6;
rangeSlider.SliderSize = new Size(12, 18);

パターン 3：垂直レイアウト

特定のレイアウト向けに垂直の範囲スライダーを作成します。

rangeSlider.Orientation = Orientation.Vertical;
rangeSlider.Height = 300;  // Sufficient height for vertical orientation
rangeSlider.Width = 50;    // Narrower for vertical

パターン 4：イベント駆動型の更新

イベントを使用してユーザー操作を処理します。

rangeSlider.Scroll += (s, e) =>
{
    // Called while user is dragging
    UpdatePreview();
};

rangeSlider.ValueChanged += (s, e) =>
{
    // Called after value change completes
    UpdateData();
};

主なプロパティのリファレンス

プロパティ	型	用途
Minimum	int	範囲の下限を定義します
Maximum	int	範囲の上限を定義します
SliderMin	int	左側／上側のつまみの位置（現在の最小値）
SliderMax	int	右側／下側のつまみの位置（現在の最大値）
Range	range structure	現在選択されている範囲を取得します
ChannelColor	Color	背景トラックの色
RangeColor	Color	選択範囲を強調表示する色
ThumbColor	Color	つまみの色
ChannelHeight	int	トラックの高さ（ピクセル単位）
SliderSize	Size	つまみの寸法
ShowTicks	bool	目盛りを表示します
TickFrequency	int	目盛りの間隔
Orientation	Orientation	水平または垂直のレイアウト
ShowLabels	bool	値ラベルを表示します
RightToLeft	RightToLeft	RTL レイアウトへの対応

デザインパターン

レスポンシブな範囲選択

ユーザーのニーズに合わせて調整されるコントロールを作成します。

public void ConfigureRangeSlider(int dataMin, int dataMax, int defaultMin, int defaultMax)
{
    rangeSlider.Minimum = dataMin;
    rangeSlider.Maximum = dataMax;
    rangeSlider.SliderMin = defaultMin;
    rangeSlider.SliderMax = defaultMax;
    
    // Calculate appropriate tick frequency
    int range = dataMax - dataMin;
    rangeSlider.TickFrequency = range > 1000 ? 100 : range > 100 ? 10 : 1;
}

検証パターン

有効な範囲が選択されていることを確認します。

rangeSlider.ValueChanged += (s, e) =>
{
    if (rangeSlider.SliderMin > rangeSlider.SliderMax)
    {
        // Swap if needed
        int temp = rangeSlider.SliderMin;
        rangeSlider.SliderMin = rangeSlider.SliderMax;
        rangeSlider.SliderMax = temp;
    }
};

よくあるユースケース

価格範囲のフィルタリング

ユーザーが価格範囲を選択して商品を絞り込めるようにします。これは、一般的に E コマースアプリケーションで使用されます。

日付範囲の選択

スライダーの値を日付範囲に対応付けて、過去のデータを絞り込む日付範囲ピッカーを作成します。

パラメーターの調整

科学または産業用アプリケーションで、最小値と最大値のパラメーターを設定できるようにします。

音量コントロール

オーディオアプリケーションで範囲スライダーを使用し、音量範囲または周波数帯を設定します。

データ分析

値の範囲を選択して、大規模なデータセットを絞り込み、可視化と分析を行います。

ベストプラクティス

1. 明確な範囲を設定する - フォームに追加する前に、必ず Minimum と Maximum を定義します
2. 視覚的なフィードバックを提供する - 選択した範囲が明確にわかるように色を使用します
3. 目盛りとラベルを表示する - ユーザーがスケールと現在の値を理解しやすくします
4. 両方のイベントを処理する - プレビューには Scroll を、最終的な更新には ValueChanged を使用します
5. レスポンシブデザインにする - 範囲の大きさに応じて TickFrequency を調整します
6. 方向を検討する - コンパクトなレイアウトには水平、特化した UI には垂直を選びます

---

次のステップ： 具体的な実装要件に応じて、上記のナビゲーションガイドから適切なリファレンスガイドをお読みください。