{"id":"d0f38e57-1812-4b6e-a799-82994ecf993a","shortId":"Sn5EAV","kind":"skill","title":"syncfusion-maui-date-time-range-slider","tagline":"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 installat","description":"# Implementing .NET MAUI Date Time Range Slider\n\nThis 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.\n\n## When to Use This Skill\n\nUse this skill when the user needs to:\n\n- Implement a **range slider** for selecting DateTime ranges in .NET MAUI apps\n- Create **date range pickers** with visual track, thumbs, and labels\n- Build **time range selectors** with hour/minute/second granularity\n- Add **dual-thumb sliders** for min-max date/time selection\n- Implement **interactive calendars** with range selection via slider\n- Customize **track, thumb, tick, label, divider, or tooltip** appearance\n- Configure **discrete stepping** through DateTime values\n- Handle **value change events** or implement **MVVM commands**\n- Apply the modern **Liquid Glass Effect** on iOS 26+/macOS 26+ platforms\n- Support **horizontal and vertical orientations** with RTL\n- Style **active/inactive regions** separately for selected ranges\n\nThis skill covers the complete API surface including installation, configuration, styling, events, commands, and advanced features like deferred updates and interval selection.\n\n## Component Overview\n\n**Control:** `SfDateTimeRangeSlider` (Syncfusion .NET MAUI Range Slider)  \n**Namespace:** `Syncfusion.Maui.Sliders`  \n**Package:** `Syncfusion.Maui.Sliders` (NuGet)  \n**Platform Support:** .NET MAUI (iOS, Android, macOS, Windows)\n\n### Key Features\n\n- **DateTime Support** - Select DateTime ranges with built-in date/time formatting\n- **Dual Thumbs** - Start and end thumbs for range selection\n- **Flexible Intervals** - Years, Months, Days, Hours, Minutes, Seconds\n- **Labels & Ticks** - Customizable labels, major/minor ticks, and dividers\n- **Tooltips** - Interactive tooltips showing selected values\n- **Orientation** - Horizontal and vertical layouts with inverse support\n- **Discrete Mode** - Step through values at specific intervals\n- **Drag Behaviors** - OnThumb, BetweenThumbs, or Both modes\n- **Rich Styling** - Separate active/inactive styling for all elements\n- **Events & Commands** - Complete lifecycle events with MVVM support\n- **Liquid Glass Effect** - Modern translucent design (iOS 26+/macOS 26+/.NET 10+)\n- **Visual State Manager** - Enabled/Disabled state customization\n\n## Documentation and Navigation Guide\n\n### Getting Started\n\n📄 **Read:** [references/getting-started.md](references/getting-started.md)\n\nWhen you need:\n- Installation and package setup\n- Handler registration (ConfigureSyncfusionCore)\n- Basic DateTime Range Slider implementation\n- Minimal working example\n- Quick start code (XAML and C#)\n- Initial configuration troubleshooting\n\n### Track and Range Configuration\n\n📄 **Read:** [references/track-and-range.md](references/track-and-range.md)\n\nWhen you need:\n- Set Minimum and Maximum DateTime values\n- Configure RangeStart and RangeEnd (selected range)\n- Change orientation (Horizontal/Vertical)\n- Inverse slider direction\n- Customize track colors (ActiveFill/InactiveFill)\n- Adjust track height/size\n- Extend track at edges (TrackExtent)\n- Style disabled states with Visual State Manager\n\n### Labels, Intervals, and Formatting\n\n📄 **Read:** [references/interval-and-labels.md](references/interval-and-labels.md)\n\nWhen you need:\n- Configure interval values and types (Years, Months, Days, etc.)\n- Enable auto-interval calculation\n- Format DateTime labels (DateFormat strings)\n- Show/hide labels\n- Position labels (OnTicks vs BetweenTicks)\n- Place edge labels (Default vs Inside)\n- Style active/inactive labels separately\n- Customize label colors, fonts, and sizes\n- Adjust label offset from ticks\n- Create custom label text via LabelCreated event\n\n### Ticks and Dividers\n\n📄 **Read:** [references/ticks-and-dividers.md](references/ticks-and-dividers.md)\n\nWhen you need:\n- Show/hide major and minor ticks\n- Configure ticks per interval\n- Customize tick colors (active/inactive)\n- Adjust tick sizes\n- Set tick offset from track\n- Enable dividers on the track\n- Style divider radius, colors, and strokes\n- Apply Visual State Manager for disabled states\n\n### Tooltips and Thumbs\n\n📄 **Read:** [references/tooltip-and-thumb.md](references/tooltip-and-thumb.md)\n\nWhen you need:\n- Enable and configure tooltips\n- Show tooltips always (without interaction)\n- Style tooltip appearance (fill, stroke, text)\n- Format tooltip DateTime values\n- Customize tooltip text via TooltipLabelCreated event\n- Configure thumb size, colors, and stroke\n- Style thumb overlap behavior\n- Customize thumb overlay (interaction halo)\n- Apply disabled states\n\n### Selection and Interaction\n\n📄 **Read:** [references/selection-and-interaction.md](references/selection-and-interaction.md)\n\nWhen you need:\n- Enable discrete selection (StepDuration)\n- Configure interval selection mode\n- Set drag behavior (OnThumb, BetweenThumbs, Both)\n- Enable deferred updates for performance\n- Adjust deferred update delay\n- Handle touch and gesture interactions\n- Understand different selection patterns\n\n### Events and Commands\n\n📄 **Read:** [references/events-and-commands.md](references/events-and-commands.md)\n\nWhen you need:\n- Handle value change lifecycle events\n- Listen to ValueChangeStart, ValueChanging, ValueChanged, ValueChangeEnd\n- Access event arguments (OldStart, OldEnd, NewStart, NewEnd)\n- Cancel value changes\n- Customize labels via LabelCreated event\n- Customize tooltips via TooltipLabelCreated event\n- Implement MVVM with DragStartedCommand/DragCompletedCommand\n- Use command parameters\n- Enable Liquid Glass Effect (platform-specific)","tags":["syncfusion","maui","date","time","range","slider","components","skills","agent-skills"],"capabilities":["skill","source-syncfusion","skill-syncfusion-maui-date-time-range-slider","topic-agent-skills"],"categories":["maui-ui-components-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/syncfusion/maui-ui-components-skills/syncfusion-maui-date-time-range-slider","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add syncfusion/maui-ui-components-skills","source_repo":"https://github.com/syncfusion/maui-ui-components-skills","install_from":"skills.sh"}},"qualityScore":"0.476","qualityRationale":"deterministic score 0.48 from registry signals: · indexed on github topic:agent-skills · 53 github stars · SKILL.md body (5,664 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T00:56:07.031Z","embedding":null,"createdAt":"2026-04-18T22:15:17.180Z","updatedAt":"2026-04-22T00:56:07.031Z","lastSeenAt":"2026-04-22T00:56:07.031Z","tsv":"'/.net':333 '/macos':179,331 '10':334 '26':178,180,330,332 'access':649 'active/inactive':190,310,467,509 'activefill/inactivefill':408 'add':128 'adjust':409,476,510,616 'advanc':210 'alway':551 'android':237 'api':201 'app':110 'appear':155,556 'appli':170,529,585 'applic':40 'argument':651 'auto':445 'auto-interv':444 'basic':360 'behavior':301,579,607 'betweenthumb':303,609 'betweentick':459 'build':121 'built':249 'built-in':248 'c':373 'calcul':447 'calendar':141 'cancel':656 'chang':164,399,640,658 'code':370 'color':407,472,508,526,573 'command':169,208,316,631,674 'complet':200,317 'compon':72,218 'comprehens':55 'configur':156,205,375,380,393,434,502,547,570,601 'configuresyncfusioncor':359 'control':16,36,67,220 'cover':43,198 'creat':111,481 'custom':147,340,405,470,482,506,564,580,659,664 'customiz':272 'date':4,22,48,112 'date/time':137,251 'dateformat':451 'datetim':12,63,81,105,160,242,245,361,391,449,562 'day':266,441 'default':463 'defer':213,612,617 'delay':619 'design':328 'differ':626 'direct':404 'disabl':418,534,586 'discret':157,292,598 'divid':152,277,490,519,524 'document':341 'drag':300,606 'dragstartedcommand/dragcompletedcommand':672 'dual':29,84,130,253 'dual-thumb':28,129 'edg':415,461 'effect':175,325,679 'element':314 'enabl':74,443,518,545,597,611,676 'enabled/disabled':338 'end':257 'etc':442 'event':165,207,315,319,487,569,629,642,650,663,668 'exampl':367 'extend':412 'featur':211,241 'fill':557 'flexibl':262 'font':473 'format':252,427,448,560 'gestur':623 'get':345 'glass':174,324,678 'granular':127 'guid':344 'guidanc':56 'halo':584 'handl':162,620,638 'handler':357 'height/size':411 'high':69 'horizont':183,285 'horizontal/vertical':401 'hour':267 'hour/minute/second':126 'implement':8,19,45,58,99,139,167,364,669 'includ':203 'initi':374 'insid':465 'instal':204,353 'installat':44 'interact':33,70,140,279,553,583,590,624 'interv':216,263,299,425,435,446,505,602 'invers':290,402 'io':177,236,329 'key':240 'label':120,151,270,273,424,450,454,456,462,468,471,477,483,660 'labelcr':486,662 'layout':288 'lifecycl':318,641 'like':212 'liquid':173,323,677 'listen':643 'maco':238 'major':498 'major/minor':274 'manag':337,423,532 'maui':3,11,39,47,62,109,224,235 'max':136 'maximum':390 'min':135 'min-max':134 'minim':365 'minimum':388 'minor':500 'minut':268 'mode':293,306,604 'modern':172,326 'month':265,440 'mvvm':168,321,670 'namespac':227 'navig':343 'need':97,352,386,433,496,544,596,637 'net':10,38,46,61,108,223,234 'newend':655 'newstart':654 'nuget':231 'offset':478,515 'oldend':653 'oldstart':652 'onthumb':302,608 'ontick':457 'orient':186,284,400 'overlap':578 'overlay':582 'overview':219 'packag':229,355 'paramet':675 'pattern':628 'per':504 'perform':615 'picker':24,114 'place':460 'platform':181,232,681 'platform-specif':680 'posit':455 'provid':54 'quick':368 'radius':525 'rang':6,13,20,23,26,34,50,64,79,101,106,113,123,143,195,225,246,260,362,379,398 'rangeend':396 'rangestart':394 'read':347,381,428,491,539,591,632 'references/events-and-commands.md':633,634 'references/getting-started.md':348,349 'references/interval-and-labels.md':429,430 'references/selection-and-interaction.md':592,593 'references/ticks-and-dividers.md':492,493 'references/tooltip-and-thumb.md':540,541 'references/track-and-range.md':382,383 'region':191 'registr':358 'rich':307 'rtl':188 'second':269 'select':35,77,104,138,144,194,217,244,261,282,397,588,599,603,627 'selector':27,124 'separ':192,309,469 'set':387,513,605 'setup':356 'sfdatetimerangeslid':15,66,221 'show':281,549 'show/hide':453,497 'size':475,512,572 'skill':42,53,90,93,197 'skill-syncfusion-maui-date-time-range-slider' 'slider':7,14,21,31,51,65,102,132,146,226,363,403 'source-syncfusion' 'specif':298,682 'start':255,346,369 'state':336,339,419,422,531,535,587 'step':158,294 'stepdur':600 'string':452 'stroke':528,558,575 'style':189,206,308,311,417,466,523,554,576 'support':182,233,243,291,322 'surfac':202 'syncfus':2,9,60,222 'syncfusion-maui-date-time-range-slid':1 'syncfusion.maui.sliders':228,230 'text':484,559,566 'thumb':30,85,118,131,149,254,258,538,571,577,581 'tick':150,271,275,480,488,501,503,507,511,514 'time':5,25,49,122 'tooltip':154,278,280,536,548,550,555,561,565,665 'tooltiplabelcr':568,667 'topic-agent-skills' 'touch':621 'track':117,148,377,406,410,413,517,522 'trackext':416 'transluc':327 'troubleshoot':376 'type':438 'ui':71 'understand':625 'updat':214,613,618 'use':17,88,91,673 'user':75,96 'valu':82,161,163,283,296,392,436,563,639,657 'valuechang':646,647 'valuechangeend':648 'valuechangestart':645 'vertic':185,287 'via':145,485,567,661,666 'visual':116,335,421,530 'vs':458,464 'window':239 'without':552 'work':366 'xaml':371 'year':264,439","prices":[{"id":"a9a71346-9fa9-4a95-a929-e3b2170a23ef","listingId":"d0f38e57-1812-4b6e-a799-82994ecf993a","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"syncfusion","category":"maui-ui-components-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T22:15:17.180Z"}],"sources":[{"listingId":"d0f38e57-1812-4b6e-a799-82994ecf993a","source":"github","sourceId":"syncfusion/maui-ui-components-skills/syncfusion-maui-date-time-range-slider","sourceUrl":"https://github.com/syncfusion/maui-ui-components-skills/tree/master/skills/syncfusion-maui-date-time-range-slider","isPrimary":false,"firstSeenAt":"2026-04-18T22:15:17.180Z","lastSeenAt":"2026-04-22T00:56:07.031Z"}],"details":{"listingId":"d0f38e57-1812-4b6e-a799-82994ecf993a","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"syncfusion","slug":"syncfusion-maui-date-time-range-slider","github":{"repo":"syncfusion/maui-ui-components-skills","stars":53,"topics":["agent-skills"],"license":null,"html_url":"https://github.com/syncfusion/maui-ui-components-skills","pushed_at":"2026-04-08T07:27:37Z","description":"Skills for Syncfusion .NET MAUI components. Enable AI-assisted development with comprehensive documentation, code examples, and best practices for 100+ UI controls including DataGrid, Charts, Scheduler, and more.","skill_md_sha":"95ed230ced322866564ad51597a8da42fef796e0","skill_md_path":"skills/syncfusion-maui-date-time-range-slider/SKILL.md","default_branch":"master","skill_tree_url":"https://github.com/syncfusion/maui-ui-components-skills/tree/master/skills/syncfusion-maui-date-time-range-slider"},"layout":"multi","source":"github","category":"maui-ui-components-skills","frontmatter":{"name":"syncfusion-maui-date-time-range-slider","description":"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."},"skills_sh_url":"https://skills.sh/syncfusion/maui-ui-components-skills/syncfusion-maui-date-time-range-slider"},"updatedAt":"2026-04-22T00:56:07.031Z"}}