syncfusion-maui-date-time-range-slider
starsforks
How to install syncfusion-maui-date-time-range-slider?
syncfusion/maui-ui-components-skills/syncfusion-maui-date-time-range-slider
$npx -y skills add syncfusion/maui-ui-components-skills --skill syncfusion-maui-date-time-range-sliderImplements 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 installat
SKILL.md
| 1 | # Implementing .NET MAUI Date Time Range Slider |
| 2 | |
| 3 | 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. |
| 4 | |
| 5 | ## When to Use This Skill |
| 6 | |
| 7 | Use this skill when the user needs to: |
| 8 | |
| 9 | - Implement a **range slider** for selecting DateTime ranges in .NET MAUI apps |
| 10 | - Create **date range pickers** with visual track, thumbs, and labels |
| 11 | - Build **time range selectors** with hour/minute/second granularity |
| 12 | - Add **dual-thumb sliders** for min-max date/time selection |
| 13 | - Implement **interactive calendars** with range selection via slider |
| 14 | - Customize **track, thumb, tick, label, divider, or tooltip** appearance |
| 15 | - Configure **discrete stepping** through DateTime values |
| 16 | - Handle **value change events** or implement **MVVM commands** |
| 17 | - Apply the modern **Liquid Glass Effect** on iOS 26+/macOS 26+ platforms |
| 18 | - Support **horizontal and vertical orientations** with RTL |
| 19 | - Style **active/inactive regions** separately for selected ranges |
| 20 | |
| 21 | This skill covers the complete API surface including installation, configuration, styling, events, commands, and advanced features like deferred updates and interval selection. |
| 22 | |
| 23 | ## Component Overview |
| 24 | |
| 25 | **Control:** `SfDateTimeRangeSlider` (Syncfusion .NET MAUI Range Slider) |
| 26 | **Namespace:** `Syncfusion.Maui.Sliders` |
| 27 | **Package:** `Syncfusion.Maui.Sliders` (NuGet) |
| 28 | **Platform Support:** .NET MAUI (iOS, Android, macOS, Windows) |
| 29 | |
| 30 | ### Key Features |
| 31 | |
| 32 | - **DateTime Support** - Select DateTime ranges with built-in date/time formatting |
| 33 | - **Dual Thumbs** - Start and end thumbs for range selection |
| 34 | - **Flexible Intervals** - Years, Months, Days, Hours, Minutes, Seconds |
| 35 | - **Labels & Ticks** - Customizable labels, major/minor ticks, and dividers |
| 36 | - **Tooltips** - Interactive tooltips showing selected values |
| 37 | - **Orientation** - Horizontal and vertical layouts with inverse support |
| 38 | - **Discrete Mode** - Step through values at specific intervals |
| 39 | - **Drag Behaviors** - OnThumb, BetweenThumbs, or Both modes |
| 40 | - **Rich Styling** - Separate active/inactive styling for all elements |
| 41 | - **Events & Commands** - Complete lifecycle events with MVVM support |
| 42 | - **Liquid Glass Effect** - Modern translucent design (iOS 26+/macOS 26+/.NET 10+) |
| 43 | - **Visual State Manager** - Enabled/Disabled state customization |
| 44 | |
| 45 | ## Documentation and Navigation Guide |
| 46 | |
| 47 | ### Getting Started |
| 48 | |
| 49 | 📄 **Read:** [references/getting-started.md](references/getting-started.md) |
| 50 | |
| 51 | When you need: |
| 52 | - Installation and package setup |
| 53 | - Handler registration (ConfigureSyncfusionCore) |
| 54 | - Basic DateTime Range Slider implementation |
| 55 | - Minimal working example |
| 56 | - Quick start code (XAML and C#) |
| 57 | - Initial configuration troubleshooting |
| 58 | |
| 59 | ### Track and Range Configuration |
| 60 | |
| 61 | 📄 **Read:** [references/track-and-range.md](references/track-and-range.md) |
| 62 | |
| 63 | When you need: |
| 64 | - Set Minimum and Maximum DateTime values |
| 65 | - Configure RangeStart and RangeEnd (selected range) |
| 66 | - Change orientation (Horizontal/Vertical) |
| 67 | - Inverse slider direction |
| 68 | - Customize track colors (ActiveFill/InactiveFill) |
| 69 | - Adjust track height/size |
| 70 | - Extend track at edges (TrackExtent) |
| 71 | - Style disabled states with Visual State Manager |
| 72 | |
| 73 | ### Labels, Intervals, and Formatting |
| 74 | |
| 75 | 📄 **Read:** [references/interval-and-labels.md](references/interval-and-labels.md) |
| 76 | |
| 77 | When you need: |
| 78 | - Configure interval values and types (Years, Months, Days, etc.) |
| 79 | - Enable auto-interval calculation |
| 80 | - Format DateTime labels (DateFormat strings) |
| 81 | - Show/hide labels |
| 82 | - Position labels (OnTicks vs BetweenTicks) |
| 83 | - Place edge labels (Default vs Inside) |
| 84 | - Style active/inactive labels separately |
| 85 | - Customize label colors, fonts, and sizes |
| 86 | - Adjust label offset from ticks |
| 87 | - Create custom label text via LabelCreated event |
| 88 | |
| 89 | ### Ticks and Dividers |
| 90 | |
| 91 | 📄 **Read:** [references/ticks-and-dividers.md](references/ticks-and-dividers.md) |
| 92 | |
| 93 | When you need: |
| 94 | - Show/hide major and minor ticks |
| 95 | - Configure ticks per interval |
| 96 | - Customize tick colors (active/inactive) |
| 97 | - Adjust tick sizes |
| 98 | - Set tick offset from track |
| 99 | - Enable dividers on the track |
| 100 | - Style divider radius, colors, and strokes |
| 101 | - Apply Visual State Manager for disabled states |
| 102 | |
| 103 | ### Tooltips and Thumbs |
| 104 | |
| 105 | 📄 **Read:** [references/tooltip-and-thumb.md](references/tooltip-and-thumb.md) |
| 106 | |
| 107 | When you need: |
| 108 | - Enable and configure tooltips |
| 109 | - Show tooltips always (without interaction) |
| 110 | - Style tooltip appearance (fill, stroke, text) |
| 111 | - Format tooltip DateTi |
People who liked this also viewed
6 picksType
- web-design-guidelinesReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".SkillsJul 2026
- lark-slides飞书幻灯片：创建和编辑幻灯片。创建演示文稿、读取幻灯片内容、管理幻灯片页面（创建、删除、读取、局部替换）。当用户需要创建或编辑幻灯片、读取或修改单个页面时使用。当用户给出 doubao.com 的 /slides/ URL/token 时，也应直接使用本 skill，不要因为域名不是飞书而回退到 WebFetch；路由依据是 URL 路径模式和 token，而不是域名。不负责：云文档内容编辑（走 SkillsJul 2026
- design-taste-frontendTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop SkillsJul 2026
- ui-ux-pro-maxUI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presSkillsJul 2026
- caveman-helpQuick-reference card for all caveman modes, skills, and commands. One-shot display, not a persistent mode. Trigger: /caveman-help, "caveman help", "what caveman commands", "how do I use caveman".SkillsJul 2026
- codebase-designShared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-nSkillsJul 2026
