syncfusion-maui-date-time-slider

Name: syncfusion-maui-date-time-slider
Author: syncfusion

120installs1forks

How to install syncfusion-maui-date-time-slider?

syncfusion/maui-ui-components-skills/syncfusion-maui-date-time-slider

$npx -y skills add syncfusion/maui-ui-components-skills --skill syncfusion-maui-date-time-slider

Installs into the current project.

Summary

Implements Syncfusion .NET MAUI DateTime Slider (SfDateTimeSlider) for date range selection. Use when working with DateTime Slider, date range selection, date picker slider, or temporal value selection UI in MAUI applications. This skill covers installation, configuration, track

Files · 1

View on GitHub

SKILL.md

1	# Implementing .NET MAUI Date Time Slider
2
3	The Syncfusion .NET MAUI DateTime Slider (SfDateTimeSlider) is a highly interactive UI control for selecting a single DateTime value from a range of date/time values. It provides rich customization options for labels, ticks, tooltips, track, thumb, and dividers, making it ideal for temporal data selection in MAUI applications.
4
5	## When to Use This Skill
6
7	Use this skill when user need to:
8	- Implement date selection with a slider interface in .NET MAUI applications
9	- Create time pickers or datetime range selectors with visual feedback
10	- Build temporal UI controls for selecting dates, times, or datetime values
11	- Customize slider appearance including track colors, thumb styling, labels, ticks, and tooltips
12	- Handle datetime value changes through events and commands in MVVM patterns
13	- Enable discrete selection with specific date/time steps (daily, monthly, yearly, hourly)
14	- Support RTL and accessibility with WCAG-compliant datetime sliders
15	- Add modern glass effects with the Liquid Glass Effect (.NET 10+)
16
17	This skill is essential when working with temporal data selection, calendar-based inputs, date range filtering, time scheduling interfaces, or any scenario requiring intuitive datetime value selection in .NET MAUI.
18
19	## Component Overview
20
21	Key Features:
22	- DateTime Support: Select DateTime values with flexible range configuration
23	- Dual Orientation: Horizontal and vertical slider orientations
24	- Rich Labeling: Customizable date format labels with active/inactive states
25	- Ticks & Dividers: Visual indicators for major/minor intervals
26	- Interactive Tooltip: Shows selected value during interaction
27	- Discrete Mode: Step-based selection with configurable intervals
28	- Visual Customization: Full control over colors, sizes, fonts, and styles
29	- Events & Commands: Value change tracking and MVVM command support
30	- Visual State Manager: Support for enabled/disabled states
31	- Liquid Glass Effect: Modern translucent design (.NET 10, iOS/macOS 26)
32
33	## Documentation and Navigation Guide
34
35	### Getting Started
36	📄 Read: [references/getting-started.md](references/getting-started.md)
37
38	When to read: First-time implementation, installation, or basic setup.
39
40	Topics covered:
41	- Installation of Syncfusion.Maui.Sliders NuGet package
42	- Handler registration with ConfigureSyncfusionCore
43	- Basic DateTime Slider implementation (XAML and C#)
44	- Setting Minimum, Maximum, and Value properties
45	- Orientation configuration (Horizontal/Vertical)
46	- Inverse slider direction with IsInversed
47	- Platform-specific setup (Visual Studio, VS Code, JetBrains Rider)
48
49	### Track Configuration
50	📄 Read: [references/track-customization.md](references/track-customization.md)
51
52	When to read: Customizing track appearance, colors, or dimensions.
53
54	Topics covered:
55	- Minimum, Maximum, and Value property details
56	- Active and inactive track colors (ActiveFill, InactiveFill)
57	- Track height customization (ActiveSize, InactiveSize)
58	- Track extent for extending track edges
59	- TrackStyle class and properties
60	- Disabled track states with Visual State Manager
61
62	### Labels and Formatting
63	📄 Read: [references/labels.md](references/labels.md)
64
65	When to read: Displaying formatted date labels or customizing label appearance.
66
67	Topics covered:
68	- ShowLabels property to enable labels
69	- DateFormat property for custom date/time formats
70	- Label placement options (OnTicks, BetweenTicks)
71	- Edge label placement (Default, Inside)
72	- Label style customization (colors, fonts, sizes)
73	- Active and inactive label styling
74	- Label offset adjustment
75	- LabelCreated event for custom label text
76	- Disabled label states
77
78	### Ticks and Dividers
79	📄 Read: [references/ticks-and-dividers.md](references/ticks-and-dividers.md)
80
81	When to read: Adding visual interval indicators or customizing tick/divider appearance.
82
83	Topics covered:
84	- ShowTicks property for major ticks
85	- MinorTicksPerInterval for minor tick indicators
86	- Major and minor tick styling (colors, sizes)
87	- Tick offset configuration
88	- ShowDividers property for divider marks
89	- Divider styling (radius, colors, stroke)
90	- Active and inactive tick/divider customization
91	- Disabled states with Visual State Manager
92
93	### Thumb and Overlay Customization
94	📄 Read: [references/thumb-and-overlay.md](references/thumb-and-overlay.md)
95
96	When to read: Customizing the draggable thumb or its interactive overlay.
97
98	Topics covered:

People who liked this also viewed

6 picks

Type

syncfusion-maui-date-time-slider

120installs1forks

View on GitHub

How to install syncfusion-maui-date-time-slider?

syncfusion/maui-ui-components-skills/syncfusion-maui-date-time-slider

$npx -y skills add syncfusion/maui-ui-components-skills --skill syncfusion-maui-date-time-slider

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Implementing .NET MAUI Date Time Slider
2
3	The Syncfusion .NET MAUI DateTime Slider (SfDateTimeSlider) is a highly interactive UI control for selecting a single DateTime value from a range of date/time values. It provides rich customization options for labels, ticks, tooltips, track, thumb, and dividers, making it ideal for temporal data selection in MAUI applications.
4
5	## When to Use This Skill
6
7	Use this skill when user need to:
8	- Implement date selection with a slider interface in .NET MAUI applications
9	- Create time pickers or datetime range selectors with visual feedback
10	- Build temporal UI controls for selecting dates, times, or datetime values
11	- Customize slider appearance including track colors, thumb styling, labels, ticks, and tooltips
12	- Handle datetime value changes through events and commands in MVVM patterns
13	- Enable discrete selection with specific date/time steps (daily, monthly, yearly, hourly)
14	- Support RTL and accessibility with WCAG-compliant datetime sliders
15	- Add modern glass effects with the Liquid Glass Effect (.NET 10+)
16
17	This skill is essential when working with temporal data selection, calendar-based inputs, date range filtering, time scheduling interfaces, or any scenario requiring intuitive datetime value selection in .NET MAUI.
18
19	## Component Overview
20
21	Key Features:
22	- DateTime Support: Select DateTime values with flexible range configuration
23	- Dual Orientation: Horizontal and vertical slider orientations
24	- Rich Labeling: Customizable date format labels with active/inactive states
25	- Ticks & Dividers: Visual indicators for major/minor intervals
26	- Interactive Tooltip: Shows selected value during interaction
27	- Discrete Mode: Step-based selection with configurable intervals
28	- Visual Customization: Full control over colors, sizes, fonts, and styles
29	- Events & Commands: Value change tracking and MVVM command support
30	- Visual State Manager: Support for enabled/disabled states
31	- Liquid Glass Effect: Modern translucent design (.NET 10, iOS/macOS 26)
32
33	## Documentation and Navigation Guide
34
35	### Getting Started
36	📄 Read: [references/getting-started.md](references/getting-started.md)
37
38	When to read: First-time implementation, installation, or basic setup.
39
40	Topics covered:
41	- Installation of Syncfusion.Maui.Sliders NuGet package
42	- Handler registration with ConfigureSyncfusionCore
43	- Basic DateTime Slider implementation (XAML and C#)
44	- Setting Minimum, Maximum, and Value properties
45	- Orientation configuration (Horizontal/Vertical)
46	- Inverse slider direction with IsInversed
47	- Platform-specific setup (Visual Studio, VS Code, JetBrains Rider)
48
49	### Track Configuration
50	📄 Read: [references/track-customization.md](references/track-customization.md)
51
52	When to read: Customizing track appearance, colors, or dimensions.
53
54	Topics covered:
55	- Minimum, Maximum, and Value property details
56	- Active and inactive track colors (ActiveFill, InactiveFill)
57	- Track height customization (ActiveSize, InactiveSize)
58	- Track extent for extending track edges
59	- TrackStyle class and properties
60	- Disabled track states with Visual State Manager
61
62	### Labels and Formatting
63	📄 Read: [references/labels.md](references/labels.md)
64
65	When to read: Displaying formatted date labels or customizing label appearance.
66
67	Topics covered:
68	- ShowLabels property to enable labels
69	- DateFormat property for custom date/time formats
70	- Label placement options (OnTicks, BetweenTicks)
71	- Edge label placement (Default, Inside)
72	- Label style customization (colors, fonts, sizes)
73	- Active and inactive label styling
74	- Label offset adjustment
75	- LabelCreated event for custom label text
76	- Disabled label states
77
78	### Ticks and Dividers
79	📄 Read: [references/ticks-and-dividers.md](references/ticks-and-dividers.md)
80
81	When to read: Adding visual interval indicators or customizing tick/divider appearance.
82
83	Topics covered:
84	- ShowTicks property for major ticks
85	- MinorTicksPerInterval for minor tick indicators
86	- Major and minor tick styling (colors, sizes)
87	- Tick offset configuration
88	- ShowDividers property for divider marks
89	- Divider styling (radius, colors, stroke)
90	- Active and inactive tick/divider customization
91	- Disabled states with Visual State Manager
92
93	### Thumb and Overlay Customization
94	📄 Read: [references/thumb-and-overlay.md](references/thumb-and-overlay.md)
95
96	When to read: Customizing the draggable thumb or its interactive overlay.
97
98	Topics covered:

People who liked this also viewed

6 picks

Type