syncfusion-winui-range-slider

WinUI RangeSlider（SfRangeSlider）の実装

Syncfusion WinUI RangeSlider コントロールを実装するための完全ガイドです。デュアルつまみ、ラベル、目盛りを備え、豊富なカスタマイズオプションを利用できる、インタラクティブな UI コンポーネントです。

このスキルを使用するタイミング

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

• WinUI アプリケーションに範囲セレクターまたは範囲ピッカーを実装する
• デュアルつまみを使ってユーザーが値の範囲を選択できるようにする
• 価格帯フィルター、日付範囲ピッカー、数値範囲セレクターを作成する
• ラベル、目盛り、ツールチップを備えたインタラクティブなスライダーを追加する
• トラック、つまみ、オーバーレイの外観をカスタマイズする
• 範囲値の変更や検証を処理する
• WinUI アプリで SfRangeSlider コントロールを使用する

WinUI RangeSlider の概要

Syncfusion WinUI RangeSlider（SfRangeSlider）は、トラック上のデュアルつまみを動かすことで、より大きなデータセットから小さな範囲を選択できる、インタラクティブな UI コントロールです。

主な機能：

• 数値範囲の選択：任意の範囲内の数値を選択できます
• 視覚要素：ラベル、目盛り、区切り線によって値を直感的に表示します
• カスタマイズ：トラック、つまみ、オーバーレイを幅広くスタイル設定できます
• ツールチップ：カスタマイズ可能な書式で選択した値を表示します
• イベント：範囲を追跡する RangeValueChanged
• 応答性：スムーズなつまみ操作と視覚的なフィードバックを提供します

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

はじめに

📄 参照： references/getting-started.md

• WinUI アプリケーションの作成
• Syncfusion.Sliders.WinUI NuGet パッケージのインストール
• SfRangeSlider の基本的な初期化
• RangeStart と RangeEnd の値の設定
• 動作する完全なサンプル

基本設定

📄 参照： references/basic-features.md

• 最小値と最大値
• 間隔の設定
• ステップの頻度
• 値変更イベント
• 向き（水平／垂直）
• 離散モードと連続モード

ラベル

📄 参照： references/labels.md

• ラベルの有効化（ShowLabels）
• ラベルの最大数
• ラベルのオフセットと配置
• ラベル形式のカスタマイズ
• カスタムラベルテンプレート
• ラベルのスタイル設定

目盛り

📄 参照： references/ticks.md

• 主目盛り（ShowTicks）
• 副目盛り（MinorTicksPerInterval）
• 目盛りの長さとオフセット
• 目盛りの配置
• 目盛りのスタイル設定

区切り線

📄 参照： references/dividers.md

• 区切り線の有効化（ShowDividers）
• 区切り線の寸法
• 区切り線のスタイル設定
• 使用例

トラックのカスタマイズ

📄 参照： references/track.md

• アクティブなトラックのスタイル設定
• 非アクティブなトラックのスタイル設定
• トラックの高さと角
• トラックの塗りつぶしのカスタマイズ

つまみとオーバーレイ

📄 参照： references/thumb-and-overlay.md

• つまみのカスタマイズ
• つまみのサイズとアイコン
• ThumbStyle プロパティ
• オーバーレイのスタイル設定
• カスタムつまみテンプレート

ツールチップ

📄 参照： references/tooltip.md

• ツールチップの有効化（ShowTooltip）
• ツールチップの書式と配置
• カスタムツールチップテンプレート
• ツールチップのスタイル設定

高度な範囲処理

📄 参照： references/custom-range.md

• RangeValueChanged およびその他のイベント
• プログラムによる値の更新
• 範囲の検証
• カスタム範囲のシナリオ

クイックスタート

1. NuGet パッケージをインストールする

<PackageReference Include="Syncfusion.Sliders.WinUI" Version="Latest" />

2. 名前空間を追加する

<Page xmlns:slider="using:Syncfusion.UI.Xaml.Sliders">

3. 基本的な実装

<slider:SfRangeSlider 
    RangeStart="30"
    RangeEnd="70"
    ShowLabels="True"
    ShowTicks="True" />

4. コードビハインド

using Syncfusion.UI.Xaml.Sliders;

SfRangeSlider rangeSlider = new SfRangeSlider();
rangeSlider.Minimum = 0;
rangeSlider.Maximum = 100;
rangeSlider.RangeStart = 30;
rangeSlider.RangeEnd = 70;
rangeSlider.ShowLabels = true;
rangeSlider.ShowTicks = true;
this.Content = rangeSlider;

一般的なパターン

価格帯フィルター

<slider:SfRangeSlider 
    Minimum="0"
    Maximum="1000"
    Interval="100"
    RangeStart="200"
    RangeEnd="800"
    ShowLabels="True"
    ShowTicks="True"
    ShowTooltip="True" />

カスタムスタイルの RangeSlider

<slider:SfRangeSlider 
    RangeStart="25"
    RangeEnd="75"
    ShowLabels="True"
    ShowTicks="True"
    ShowDividers="True"
    ActiveTrackHeight="4"
    InactiveTrackHeight="4"
    DividerHeight="4"
    DividerWidth="4"
    ThumbHeight="20"
    ThumbWidth="20" />

値変更の追跡

<slider:SfRangeSlider 
    x:Name="rangeSlider"
    RangeStart="30"
    RangeEnd="70"
    RangeValueChanged="OnRangeChanged" />

private void OnRangeChanged(object sender, RangeValueChangedEventArgs e)
{
    double oldStart = e.RangeStartOldValue;
    double oldEnd = e.RangeEndOldValue;
    double newStart = e.RangeStartNewValue;
    double newEnd = e.RangeEndNewValue;
    
    // Update UI or perform validation
    Debug.WriteLine($"Range: {newStart} - {newEnd}");
}

主なプロパティ

範囲の設定

• Minimum (double)：最小値（既定値：0）
• Maximum (double)：最大値（既定値：100）
• RangeStart (double)：選択範囲の開始値
• RangeEnd (double)：選択範囲の終了値
• Interval (double)：ラベル／目盛りの間隔
• StepFrequency (double)：値の変更幅

視覚要素

• ShowLabels (bool)：間隔の位置にラベルを表示します
• ShowTicks (bool)：主目盛りを表示します
• ShowDividers (bool)：区切り線を表示します
• ShowTooltip (bool)：つまみにツールチップを表示します

カスタマイズ

• ActiveTrackHeight (double)：アクティブトラックの高さ
• InactiveTrackHeight (double)：非アクティブトラックの高さ
• ThumbHeight (double)：つまみの高さ
• ThumbWidth (double)：つまみの幅
• OverlayRadius (double)：つまみオーバーレイの半径

動作

• IsInversed (bool)：方向を反転します
• MinorTicksPerInterval (int)：各間隔の間に表示する補助目盛りの数
• MaximumLabelsCount (int)：論理ピクセル100あたりのラベルの最大数

一般的な使用例

Eコマースの価格フィルター

RangeSliderを使って、価格の範囲で商品を絞り込みます。ラベルとツールチップには通貨の値を表示できます。

日付範囲選択

カレンダーアプリケーション向けに、ラベルの書式をカスタマイズして月／年の範囲選択を実装します。

オーディオ／ビデオのタイムライン選択

範囲を正確に制御し、視覚的なフィードバックを提供するクリップ選択ツールを作成します。

データフィルタリングダッシュボード

数値の範囲（年齢、数量、評価など）でデータセットを絞り込めるようにします。

設定と構成

アプリの設定（音量範囲、明るさの範囲など）に、直感的に操作できる範囲セレクターを用意します。

トラブルシューティング

範囲の値が更新されない場合：

• RangeStartとRangeEndがMinimumとMaximumの範囲内にあることを確認します
• 双方向のデータバインディングが正しく設定されているか確認します
• RangeValueChangedイベントが正しく接続されていることを確認します

ラベルが表示されない場合：

• ShowLabels="True"を設定します
• ラベルの間隔を設定するには、Intervalプロパティを設定します
• 自動間隔を使用している場合は、MaximumLabelsCountを確認します

目盛りが表示されない場合：

• ShowTicks="True"を設定します
• Intervalが定義されていることを確認します
• 必要に応じてTickOffsetを調整します

ツールチップが表示されない場合：

• ShowTooltip="True"を設定します
• TooltipPlacementプロパティを確認します
• ツールチップのテンプレートが有効であることを確認します

関連コンポーネント

• Slider (SfSlider)：単一の値を選択するためのつまみが1つのスライダー
• DateRangeSlider：日付範囲の選択に特化したスライダー

リソース

• WinUI RangeSliderのドキュメント
• APIリファレンス
• GitHubのサンプル
• NuGetパッケージ