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