Implementing .NET MAUI Date Time Range Slider
This skill provides comprehensive guidance for implementing the Syncfusion .NET MAUI DateTime Range Slider (SfDateTimeRangeSlider) control, a highly interactive UI component that enables users to select a range of DateTime values with dual thumbs.
When to Use This Skill
Use this skill when the user needs to:
- Implement a range slider for selecting DateTime ranges in .NET MAUI apps
- Create date range pickers with visual track, thumbs, and labels
- Build time range selectors with hour/minute/second granularity
- Add dual-thumb sliders for min-max date/time selection
- Implement interactive calendars with range selection via slider
- Customize track, thumb, tick, label, divider, or tooltip appearance
- Configure discrete stepping through DateTime values
- Handle value change events or implement MVVM commands
- Apply the modern Liquid Glass Effect on iOS 26+/macOS 26+ platforms
- Support horizontal and vertical orientations with RTL
- Style active/inactive regions separately for selected ranges
This skill covers the complete API surface including installation, configuration, styling, events, commands, and advanced features like deferred updates and interval selection.
Component Overview
Control: SfDateTimeRangeSlider (Syncfusion .NET MAUI Range Slider)
Namespace: Syncfusion.Maui.Sliders
Package: Syncfusion.Maui.Sliders (NuGet)
Platform Support: .NET MAUI (iOS, Android, macOS, Windows)
Key Features
- DateTime Support - Select DateTime ranges with built-in date/time formatting
- Dual Thumbs - Start and end thumbs for range selection
- Flexible Intervals - Years, Months, Days, Hours, Minutes, Seconds
- Labels & Ticks - Customizable labels, major/minor ticks, and dividers
- Tooltips - Interactive tooltips showing selected values
- Orientation - Horizontal and vertical layouts with inverse support
- Discrete Mode - Step through values at specific intervals
- Drag Behaviors - OnThumb, BetweenThumbs, or Both modes
- Rich Styling - Separate active/inactive styling for all elements
- Events & Commands - Complete lifecycle events with MVVM support
- Liquid Glass Effect - Modern translucent design (iOS 26+/macOS 26+/.NET 10+)
- Visual State Manager - Enabled/Disabled state customization
Documentation and Navigation Guide
Getting Started
📄 Read: references/getting-started.md
When you need:
- Installation and package setup
- Handler registration (ConfigureSyncfusionCore)
- Basic DateTime Range Slider implementation
- Minimal working example
- Quick start code (XAML and C#)
- Initial configuration troubleshooting
Track and Range Configuration
📄 Read: references/track-and-range.md
When you need:
- Set Minimum and Maximum DateTime values
- Configure RangeStart and RangeEnd (selected range)
- Change orientation (Horizontal/Vertical)
- Inverse slider direction
- Customize track colors (ActiveFill/InactiveFill)
- Adjust track height/size
- Extend track at edges (TrackExtent)
- Style disabled states with Visual State Manager
Labels, Intervals, and Formatting
📄 Read: references/interval-and-labels.md
When you need:
- Configure interval values and types (Years, Months, Days, etc.)
- Enable auto-interval calculation
- Format DateTime labels (DateFormat strings)
- Show/hide labels
- Position labels (OnTicks vs BetweenTicks)
- Place edge labels (Default vs Inside)
- Style active/inactive labels separately
- Customize label colors, fonts, and sizes
- Adjust label offset from ticks
- Create custom label text via LabelCreated event
Ticks and Dividers
📄 Read: references/ticks-and-dividers.md
When you need:
- Show/hide major and minor ticks
- Configure ticks per interval
- Customize tick colors (active/inactive)
- Adjust tick sizes
- Set tick offset from track
- Enable dividers on the track
- Style divider radius, colors, and strokes
- Apply Visual State Manager for disabled states
Tooltips and Thumbs
📄 Read: references/tooltip-and-thumb.md
When you need:
- Enable and configure tooltips
- Show tooltips always (without interaction)
- Style tooltip appearance (fill, stroke, text)
- Format tooltip DateTime values
- Customize tooltip text via TooltipLabelCreated event
- Configure thumb size, colors, and stroke
- Style thumb overlap behavior
- Customize thumb overlay (interaction halo)
- Apply disabled states
Selection and Interaction
📄 Read: references/selection-and-interaction.md
When you need:
- Enable discrete selection (StepDuration)
- Configure interval selection mode
- Set drag behavior (OnThumb, BetweenThumbs, Both)
- Enable deferred updates for performance
- Adjust deferred update delay
- Handle touch and gesture interactions
- Understand different selection patterns
Events and Commands
📄 Read: references/events-and-commands.md
When you need:
- Handle value change lifecycle events
- Listen to ValueChangeStart, ValueChanging, ValueChanged, ValueChangeEnd
- Access event arguments (OldStart, OldEnd, NewStart, NewEnd)
- Cancel value changes
- Customize labels via LabelCreated event
- Customize tooltips via TooltipLabelCreated event
- Implement MVVM with DragStartedCommand/DragCompletedCommand
- Use command parameters
- Enable Liquid Glass Effect (platform-specific)
1---2name: syncfusion-maui-date-time-range-slider3description: Implements Syncfusion .NET MAUI DateTime Range Slider (SfDateTimeRangeSlider) control. Use when implementing range sliders, date range pickers, time range selectors, dual-thumb sliders, or interactive range selection controls in .NET MAUI applications. This skill covers installation, configuration, track styling, labels, ticks, dividers, tooltips, thumb customization, and the Liquid Glass Effect.4---5
6# Implementing .NET MAUI Date Time Range Slider
7
8This skill provides comprehensive guidance for implementing the Syncfusion .NET MAUI DateTime Range Slider (`SfDateTimeRangeSlider`) control, a highly interactive UI component that enables users to select a range of DateTime values with dual thumbs.
9
10## When to Use This Skill
11
12Use this skill when the user needs to:
13
14- Implement a **range slider** for selecting DateTime ranges in .NET MAUI apps
15- Create **date range pickers** with visual track, thumbs, and labels
16- Build **time range selectors** with hour/minute/second granularity
17- Add **dual-thumb sliders** for min-max date/time selection
18- Implement **interactive calendars** with range selection via slider
19- Customize **track, thumb, tick, label, divider, or tooltip** appearance
20- Configure **discrete stepping** through DateTime values
21- Handle **value change events** or implement **MVVM commands**
22- Apply the modern **Liquid Glass Effect** on iOS 26+/macOS 26+ platforms
23- Support **horizontal and vertical orientations** with RTL
24- Style **active/inactive regions** separately for selected ranges
25
26This skill covers the complete API surface including installation, configuration, styling, events, commands, and advanced features like deferred updates and interval selection.
27
28## Component Overview
29
30**Control:** `SfDateTimeRangeSlider` (Syncfusion .NET MAUI Range Slider)
31**Namespace:** `Syncfusion.Maui.Sliders`
32**Package:** `Syncfusion.Maui.Sliders` (NuGet)
33**Platform Support:** .NET MAUI (iOS, Android, macOS, Windows)
34
35### Key Features
36
37- **DateTime Support** - Select DateTime ranges with built-in date/time formatting
38- **Dual Thumbs** - Start and end thumbs for range selection
39- **Flexible Intervals** - Years, Months, Days, Hours, Minutes, Seconds
40- **Labels & Ticks** - Customizable labels, major/minor ticks, and dividers
41- **Tooltips** - Interactive tooltips showing selected values
42- **Orientation** - Horizontal and vertical layouts with inverse support
43- **Discrete Mode** - Step through values at specific intervals
44- **Drag Behaviors** - OnThumb, BetweenThumbs, or Both modes
45- **Rich Styling** - Separate active/inactive styling for all elements
46- **Events & Commands** - Complete lifecycle events with MVVM support
47- **Liquid Glass Effect** - Modern translucent design (iOS 26+/macOS 26+/.NET 10+)
48- **Visual State Manager** - Enabled/Disabled state customization
49
50## Documentation and Navigation Guide
51
52### Getting Started
53
54📄 **Read:** [references/getting-started.md](references/getting-started.md)
55
56When you need:
57- Installation and package setup
58- Handler registration (ConfigureSyncfusionCore)
59- Basic DateTime Range Slider implementation
60- Minimal working example
61- Quick start code (XAML and C#)
62- Initial configuration troubleshooting
63
64### Track and Range Configuration
65
66📄 **Read:** [references/track-and-range.md](references/track-and-range.md)
67
68When you need:
69- Set Minimum and Maximum DateTime values
70- Configure RangeStart and RangeEnd (selected range)
71- Change orientation (Horizontal/Vertical)
72- Inverse slider direction
73- Customize track colors (ActiveFill/InactiveFill)
74- Adjust track height/size
75- Extend track at edges (TrackExtent)
76- Style disabled states with Visual State Manager
77
78### Labels, Intervals, and Formatting
79
80📄 **Read:** [references/interval-and-labels.md](references/interval-and-labels.md)
81
82When you need:
83- Configure interval values and types (Years, Months, Days, etc.)
84- Enable auto-interval calculation
85- Format DateTime labels (DateFormat strings)
86- Show/hide labels
87- Position labels (OnTicks vs BetweenTicks)
88- Place edge labels (Default vs Inside)
89- Style active/inactive labels separately
90- Customize label colors, fonts, and sizes
91- Adjust label offset from ticks
92- Create custom label text via LabelCreated event
93
94### Ticks and Dividers
95
96📄 **Read:** [references/ticks-and-dividers.md](references/ticks-and-dividers.md)
97
98When you need:
99- Show/hide major and minor ticks
100- Configure ticks per interval
101- Customize tick colors (active/inactive)
102- Adjust tick sizes
103- Set tick offset from track
104- Enable dividers on the track
105- Style divider radius, colors, and strokes
106- Apply Visual State Manager for disabled states
107
108### Tooltips and Thumbs
109
110📄 **Read:** [references/tooltip-and-thumb.md](references/tooltip-and-thumb.md)
111
112When you need:
113- Enable and configure tooltips
114- Show tooltips always (without interaction)
115- Style tooltip appearance (fill, stroke, text)
116- Format tooltip DateTime values
117- Customize tooltip text via TooltipLabelCreated event
118- Configure thumb size, colors, and stroke
119- Style thumb overlap behavior
120- Customize thumb overlay (interaction halo)
121- Apply disabled states
122
123### Selection and Interaction
124
125📄 **Read:** [references/selection-and-interaction.md](references/selection-and-interaction.md)
126
127When you need:
128- Enable discrete selection (StepDuration)
129- Configure interval selection mode
130- Set drag behavior (OnThumb, BetweenThumbs, Both)
131- Enable deferred updates for performance
132- Adjust deferred update delay
133- Handle touch and gesture interactions
134- Understand different selection patterns
135
136### Events and Commands
137
138📄 **Read:** [references/events-and-commands.md](references/events-and-commands.md)
139
140When you need:
141- Handle value change lifecycle events
142- Listen to ValueChangeStart, ValueChanging, ValueChanged, ValueChangeEnd
143- Access event arguments (OldStart, OldEnd, NewStart, NewEnd)
144- Cancel value changes
145- Customize labels via LabelCreated event
146- Customize tooltips via TooltipLabelCreated event
147- Implement MVVM with DragStartedCommand/DragCompletedCommand
148- Use command parameters
149- Enable Liquid Glass Effect (platform-specific)
150
gabrielmoreira