Implementing .NET MAUI Range Selector
The Syncfusion SfRangeSelector is a .NET MAUI control that lets users select a numeric range by dragging thumbs over a track. It uniquely supports embedding any content (typically a chart) inside the selector, making it ideal for filtering chart data by range.
When to Use This Skill
Use this skill when the user needs to:
- Set up SfRangeSelector from scratch in a MAUI app
- Embed chart content (
SfCartesianChart or other views) inside the range selector for interactive data filtering
- Customize track appearance — colors, height, and extent
- Configure intervals, ticks, labels, and dividers for the range scale
- Style thumb and overlay — size, colors, stroke
- Configure tooltips — show always, styling, custom text
- Implement selection modes — discrete, interval selection, drag behaviors
- Handle events — ValueChanged, ValueChanging, LabelCreated
- Use MVVM commands — DragStartedCommand, DragCompletedCommand
- Customize labels — placement, edge placement, styling, offset
- Style ticks and dividers — colors, sizes, strokes
- Add visual regions — active/inactive region colors and strokes
- Invert range selector direction with IsInversed
- Format displayed labels with prefix/suffix via
NumberFormat
- Enable Liquid Glass effect for modern translucent design
- Bind RangeStart/RangeEnd to a ViewModel for MVVM data binding
Component Overview
The SfRangeSelector is a .NET MAUI control for selecting a numeric range by dragging dual thumbs over a track. It uniquely supports embedding any content (typically a chart) inside the selector, making it ideal for interactive data filtering.
Package: Syncfusion.Maui.Sliders
Namespace: Syncfusion.Maui.Sliders
Control: SfRangeSelector
Key Capabilities:
- Embedded Content: Any .NET MAUI view (e.g.,
SfCartesianChart) rendered inside the selector
- Dual Thumbs: Drag to define start and end values with full track styling
- Interval Controls: Labels, ticks, minor ticks, and dividers at configurable intervals
- Selection Modes: Discrete steps, interval snapping, and drag behavior options
- Rich Customization: Track colors, thumb styles, tooltip, label/tick/divider styling
- Region Support: Active/inactive region customization
- MVVM Ready: Events, commands, and two-way data binding support
- Liquid Glass Effect: Modern translucent design for iOS/macOS 26+
Documentation and Navigation Guide
Getting Started
📄 Read: references/getting-started.md
- NuGet installation (
Syncfusion.Maui.Sliders)
- Handler registration in
MauiProgram.cs
- Minimal XAML and C# setup
- Adding chart content via the
Content property
- Namespace imports
Interval Configuration
📄 Read: references/interval-configuration.md
- Setting
Interval, Minimum, Maximum
- Auto-interval calculation when
Interval = 0
- Showing ticks with
ShowTicks + MinorTicksPerInterval
- Showing dividers with
ShowDividers
- How interval affects labels and ticks rendering
Display Features
📄 Read: references/display-features.md
- Enabling labels with
ShowLabels
- Enabling ticks and minor ticks
- Formatting labels with
NumberFormat (prefix/suffix)
- Inverting the selector with
IsInversed
- Configuring
RangeStart and RangeEnd
Content and Chart Integration
📄 Read: references/content-and-integration.md
- How the
Content property works
- Embedding
SfCartesianChart with hidden axes
- ViewModel +
ItemsSource binding pattern
SplineAreaSeries setup inside a range selector- Tips for using other chart types
Track Customization
📄 Read: references/track-customization.md
- Minimum and Maximum properties
- RangeStart and RangeEnd values
- Track colors (ActiveFill, InactiveFill)
- Track height (ActiveSize, InactiveSize)
- Track extent (extending track edges)
- TrackStyle property and complete styling
Labels Customization
📄 Read: references/labels-customization.md
- ShowLabels property
- NumberFormat for prefix/suffix ($, %, etc.)
- LabelsPlacement (OnTicks vs BetweenTicks)
- EdgeLabelsPlacement (Default vs Inside)
- LabelStyle (colors, fonts, sizes for active/inactive)
- Label offset customization
- Custom label text via LabelCreated event
Ticks and Dividers
📄 Read: references/ticks-and-dividers.md
- ShowTicks and major ticks configuration
- MinorTicksPerInterval for minor ticks
- MajorTickStyle (colors, sizes, offset)
- MinorTickStyle (colors, sizes, offset)
- ShowDividers property
- DividerStyle (radius, colors, stroke, stroke thickness)
- Complete tick and divider styling examples
Selection Modes
📄 Read: references/selection-modes.md
- Discrete selection with StepSize
- EnableIntervalSelection property
- DragBehavior options (OnThumb, BetweenThumbs, Both)
- EnableDeferredUpdate for performance
- DeferredUpdateDelay configuration
- Selection behavior comparisons
Tooltip Configuration
📄 Read: references/tooltip-configuration.md
- Enabling tooltip with SliderTooltip
- ShowAlways property for persistent tooltips
- Tooltip styling (Fill, Stroke, StrokeThickness)
- Text styling (TextColor, FontSize, FontFamily, FontAttributes)
- Padding and Position properties
- NumberFormat for tooltip text
- Custom tooltip text via TooltipLabelCreated event
Thumb and Styling
📄 Read: references/thumb-and-styling.md
- ThumbStyle properties (Radius, Fill, Stroke, StrokeThickness)
- OverlapStroke for overlapping thumbs
- ThumbOverlayStyle (Radius, Fill)
- Visual regions (ActiveRegionFill, InactiveRegionFill, strokes)
- Complete styling patterns
- EnableLiquidGlassEffect for modern translucent design
- Platform requirements for Liquid Glass
Events and Commands
📄 Read: references/events-and-commands.md
- Value change events (ValueChangeStart, ValueChanging, ValueChanged, ValueChangeEnd)
- LabelCreated event for custom label text
- TooltipLabelCreated event for custom tooltip text
- DragStartedCommand and DragCompletedCommand
- Command parameters
- MVVM pattern implementation
- Complete event handling examples
1---2name: syncfusion-maui-range-selector3description: Implements the Syncfusion .NET MAUI Range Selector (SfRangeSelector) component. Use when working with range selection with embedded charts, numeric range input, RangeStart/RangeEnd, track customization, or thumb styling in .NET MAUI. Covers tooltip configuration, label formatting, ticks/dividers, selection modes, events, and embedding SfCartesianChart inside a range control.4---5
6# Implementing .NET MAUI Range Selector
7
8The Syncfusion `SfRangeSelector` is a .NET MAUI control that lets users select a numeric range by dragging thumbs over a track. It uniquely supports embedding any content (typically a chart) inside the selector, making it ideal for filtering chart data by range.
9
10## When to Use This Skill
11
12Use this skill when the user needs to:
13
14- **Set up SfRangeSelector** from scratch in a MAUI app
15- **Embed chart content** (`SfCartesianChart` or other views) inside the range selector for interactive data filtering
16- **Customize track appearance** — colors, height, and extent
17- **Configure intervals, ticks, labels, and dividers** for the range scale
18- **Style thumb and overlay** — size, colors, stroke
19- **Configure tooltips** — show always, styling, custom text
20- **Implement selection modes** — discrete, interval selection, drag behaviors
21- **Handle events** — ValueChanged, ValueChanging, LabelCreated
22- **Use MVVM commands** — DragStartedCommand, DragCompletedCommand
23- **Customize labels** — placement, edge placement, styling, offset
24- **Style ticks and dividers** — colors, sizes, strokes
25- **Add visual regions** — active/inactive region colors and strokes
26- **Invert range selector direction** with IsInversed
27- **Format displayed labels** with prefix/suffix via `NumberFormat`
28- **Enable Liquid Glass effect** for modern translucent design
29- **Bind RangeStart/RangeEnd to a ViewModel** for MVVM data binding
30
31## Component Overview
32
33The **SfRangeSelector** is a .NET MAUI control for selecting a numeric range by dragging dual thumbs over a track. It uniquely supports embedding any content (typically a chart) inside the selector, making it ideal for interactive data filtering.
34
35**Package**: `Syncfusion.Maui.Sliders`
36**Namespace**: `Syncfusion.Maui.Sliders`
37**Control**: `SfRangeSelector`
38
39**Key Capabilities:**
40- **Embedded Content**: Any .NET MAUI view (e.g., `SfCartesianChart`) rendered inside the selector
41- **Dual Thumbs**: Drag to define start and end values with full track styling
42- **Interval Controls**: Labels, ticks, minor ticks, and dividers at configurable intervals
43- **Selection Modes**: Discrete steps, interval snapping, and drag behavior options
44- **Rich Customization**: Track colors, thumb styles, tooltip, label/tick/divider styling
45- **Region Support**: Active/inactive region customization
46- **MVVM Ready**: Events, commands, and two-way data binding support
47- **Liquid Glass Effect**: Modern translucent design for iOS/macOS 26+
48
49## Documentation and Navigation Guide
50
51### Getting Started
52📄 **Read:** [references/getting-started.md](references/getting-started.md)
53- NuGet installation (`Syncfusion.Maui.Sliders`)
54- Handler registration in `MauiProgram.cs`
55- Minimal XAML and C# setup
56- Adding chart content via the `Content` property
57- Namespace imports
58
59### Interval Configuration
60📄 **Read:** [references/interval-configuration.md](references/interval-configuration.md)
61- Setting `Interval`, `Minimum`, `Maximum`
62- Auto-interval calculation when `Interval = 0`
63- Showing ticks with `ShowTicks` + `MinorTicksPerInterval`
64- Showing dividers with `ShowDividers`
65- How interval affects labels and ticks rendering
66
67### Display Features
68📄 **Read:** [references/display-features.md](references/display-features.md)
69- Enabling labels with `ShowLabels`
70- Enabling ticks and minor ticks
71- Formatting labels with `NumberFormat` (prefix/suffix)
72- Inverting the selector with `IsInversed`
73- Configuring `RangeStart` and `RangeEnd`
74
75### Content and Chart Integration
76📄 **Read:** [references/content-and-integration.md](references/content-and-integration.md)
77- How the `Content` property works
78- Embedding `SfCartesianChart` with hidden axes
79- ViewModel + `ItemsSource` binding pattern
80- `SplineAreaSeries` setup inside a range selector
81- Tips for using other chart types
82
83### Track Customization
84📄 **Read:** [references/track-customization.md](references/track-customization.md)
85- Minimum and Maximum properties
86- RangeStart and RangeEnd values
87- Track colors (ActiveFill, InactiveFill)
88- Track height (ActiveSize, InactiveSize)
89- Track extent (extending track edges)
90- TrackStyle property and complete styling
91
92### Labels Customization
93📄 **Read:** [references/labels-customization.md](references/labels-customization.md)
94- ShowLabels property
95- NumberFormat for prefix/suffix ($, %, etc.)
96- LabelsPlacement (OnTicks vs BetweenTicks)
97- EdgeLabelsPlacement (Default vs Inside)
98- LabelStyle (colors, fonts, sizes for active/inactive)
99- Label offset customization
100- Custom label text via LabelCreated event
101
102### Ticks and Dividers
103📄 **Read:** [references/ticks-and-dividers.md](references/ticks-and-dividers.md)
104- ShowTicks and major ticks configuration
105- MinorTicksPerInterval for minor ticks
106- MajorTickStyle (colors, sizes, offset)
107- MinorTickStyle (colors, sizes, offset)
108- ShowDividers property
109- DividerStyle (radius, colors, stroke, stroke thickness)
110- Complete tick and divider styling examples
111
112### Selection Modes
113📄 **Read:** [references/selection-modes.md](references/selection-modes.md)
114- Discrete selection with StepSize
115- EnableIntervalSelection property
116- DragBehavior options (OnThumb, BetweenThumbs, Both)
117- EnableDeferredUpdate for performance
118- DeferredUpdateDelay configuration
119- Selection behavior comparisons
120
121### Tooltip Configuration
122📄 **Read:** [references/tooltip-configuration.md](references/tooltip-configuration.md)
123- Enabling tooltip with SliderTooltip
124- ShowAlways property for persistent tooltips
125- Tooltip styling (Fill, Stroke, StrokeThickness)
126- Text styling (TextColor, FontSize, FontFamily, FontAttributes)
127- Padding and Position properties
128- NumberFormat for tooltip text
129- Custom tooltip text via TooltipLabelCreated event
130
131### Thumb and Styling
132📄 **Read:** [references/thumb-and-styling.md](references/thumb-and-styling.md)
133- ThumbStyle properties (Radius, Fill, Stroke, StrokeThickness)
134- OverlapStroke for overlapping thumbs
135- ThumbOverlayStyle (Radius, Fill)
136- Visual regions (ActiveRegionFill, InactiveRegionFill, strokes)
137- Complete styling patterns
138- EnableLiquidGlassEffect for modern translucent design
139- Platform requirements for Liquid Glass
140
141### Events and Commands
142📄 **Read:** [references/events-and-commands.md](references/events-and-commands.md)
143- Value change events (ValueChangeStart, ValueChanging, ValueChanged, ValueChangeEnd)
144- LabelCreated event for custom label text
145- TooltipLabelCreated event for custom tooltip text
146- DragStartedCommand and DragCompletedCommand
147- Command parameters
148- MVVM pattern implementation
149- Complete event handling examples
150
gabrielmoreira