syncfusion-maui-range-slider

.NET MAUI 範囲スライダーの実装

Syncfusion .NET MAUI 範囲スライダー（SfRangeSlider）は、定義された最小値と最大値の間で値の範囲を選択できる、操作性に優れた UI コントロールです。トラックのカスタマイズ、ラベル、目盛り、区切り線、ツールチップなど豊富な機能を備え、直感的で視覚的に魅力的な範囲選択エクスペリエンスを作成できます。

このスキルを使う場面

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

• 最小値と最大値を選択するための、2 つのつまみを持つ範囲スライダーを実装する
• 価格帯セレクターを作成する（例：50 ドルから 500 ドルの商品の絞り込み）
• 日付／時刻範囲選択コントロールを構築する
• 音量、明るさ、温度の範囲コントロールを実装する
• データ可視化用の数値範囲フィルターを作成する
• ラベル、目盛り、ツールチップを備えたカスタム範囲入力コントロールを構築する
• ステップ値を指定した離散的または連続的な範囲選択を実装する
• 色、サイズ、スタイルを使って範囲スライダーの外観をカスタマイズする
• イベントやコマンドで範囲値の変更を処理する
• ARIA サポートを備えた、アクセシブルな範囲選択インターフェイスを作成する

主な機能：2 つのつまみによる操作、数値範囲、間隔、離散選択、カスタムスタイル、ツールチップ、ラベル、目盛り、区切り線、イベント、MVVM コマンド、RTL サポート、リキッドグラス効果。

コンポーネントの概要

Syncfusion .NET MAUI 範囲スライダー（SfRangeSlider）は、最小値と最大値の範囲内で値を選択するためのインタラクティブな UI コントロールです。ユーザーがドラッグして開始値と終了値を定義できる 2 つのつまみを備え、トラックのスタイル設定、ラベル、目盛り、区切り線、ツールチップなどの豊富な視覚機能を提供します。

パッケージ：Syncfusion.Maui.Sliders
名前空間：Syncfusion.Maui.Sliders
コントロール：SfRangeSlider

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

はじめに

📄 参照先： references/getting-started.md
初めて範囲スライダーを実装する場合に参照してください。以下の内容を説明します。

• NuGet パッケージのインストール（Syncfusion.Maui.Sliders）
• ハンドラーの登録（ConfigureSyncfusionCore）
• SfRangeSlider の基本的な初期化
• 名前空間のインポートと最小限の例
• IDE ごとの設定（Visual Studio、VS Code、Rider）

トラックのカスタマイズ

📄 参照先： references/track.md
スライダーのトラックの外観や動作をカスタマイズする場合に参照してください。以下の内容を説明します。

• Minimum、Maximum、RangeStart、RangeEnd の設定
• トラックの色（ActiveFill、InactiveFill）
• トラックのサイズ（ActiveSize、InactiveSize）
• 端まで延長するトラックの範囲
• 方向（Horizontal、Vertical）
• 方向を反転する IsInversed プロパティ

つまみとオーバーレイ

📄 参照先： references/thumbs-and-overlays.md
つまみの外観や操作時のフィードバックをカスタマイズする場合に参照してください。以下の内容を説明します。

• つまみのサイズ（Radius）
• カスタムつまみアイコン（StartThumbIcon、EndThumbIcon）
• つまみの色（Fill、Stroke、StrokeThickness）
• つまみが重なる場合の OverlapStroke
• つまみのオーバーレイ設定
• 無効なつまみの視覚状態

ラベルと書式設定

📄 参照先： references/labels.md
値ラベルを表示して書式設定する場合に参照してください。以下の内容を説明します。

• ShowLabels プロパティ
• カスタム書式設定用の NumberFormat
• ラベルの配置（OnTicks、BetweenTicks）
• 端のラベルの配置
• ラベルのスタイル（色、フォント、オフセット）
• 動的な書式設定を行う LabelCreated イベント

目盛りの設定

📄 参照先： references/ticks.md
トラック上に視覚的なマーカーを追加する場合に参照してください。以下の内容を説明します。

• 主目盛り用の ShowTicks
• 補助目盛り用の MinorTicksPerInterval
• 目盛りの色（ActiveFill、InactiveFill）
• 目盛りのサイズ（ActiveSize、InactiveSize）
• 目盛りのオフセットとスタイル設定
• 無効な目盛りの視覚状態

区切り線

📄 参照先： references/dividers.md
間隔の位置に視覚的な区切りを追加する場合に参照してください。以下の内容を説明します。

• ShowDividers プロパティ
• 区切り線の半径と色
• 区切り線のストロークと太さ
• DividerStyle の設定
• 無効な区切り線の視覚状態

間隔と選択

📄 読む： references/intervals-and-selection.md
間隔の動作と選択モードを設定する場合に参照します。以下の内容を取り上げています：

• 間隔を設定するIntervalプロパティ
• 離散選択用のStepSize
• EnableIntervalSelection
• DragBehavior（OnThumb、BetweenThumbs、Both）
• パフォーマンス向上のためのEnableDeferredUpdate
• DeferredUpdateDelayの設定

ツールチップ

📄 読む： references/tooltips.md
操作中に値のツールチップを表示する場合に参照します。以下の内容を取り上げています：

• ツールチップを有効にする方法（SliderTooltip）
• ShowAlwaysプロパティ
• ツールチップのスタイル設定（Fill、Stroke、TextColor）
• フォントとパディングのカスタマイズ
• 書式設定用のTooltipLabelCreatedイベント

イベントとコマンド

📄 読む： references/events-and-commands.md
値の変更やユーザー操作を処理する場合に参照します。以下の内容を取り上げています：

• ValueChangeStart、ValueChanging、ValueChanged、ValueChangeEnd
• LabelCreatedイベントとTooltipLabelCreatedイベント
• DragStartedCommand、DragCompletedCommand
• コマンドパラメーターとMVVMパターン
• イベント引数とカスタムロジック

リキッドグラス効果

📄 読む： references/liquid-glass-effect.md
モダンな半透明デザインを実装する場合に参照します。以下の内容を取り上げています：

• EnableLiquidGlassEffectプロパティ
• プラットフォーム要件（.NET 10、iOS 26、macOS 26）
• 背景画像の設定
• 視覚的な操作フィードバック
• 使用例とベストプラクティス