{"id":"27624c7a-0571-418c-a0be-851e2ef2bead","shortId":"WtQGSL","kind":"skill","title":"syncfusion-maui-range-selector","tagline":"Implements the Syncfusion .NET MAUI Range Selector (SfRangeSelector) component. Use when working with range selection with embedded charts, numeric range input, RangeStart/RangeEnd, track customization, or thumb styling in .NET MAUI. Covers tooltip configuration, label formatting","description":"# Implementing .NET MAUI Range Selector\n\nThe Syncfusion `SfRangeSelector` is a .NET MAUI control that lets users select a numeric range by dragging thumbs over a track. It uniquely supports embedding any content (typically a chart) inside the selector, making it ideal for filtering chart data by range.\n\n## When to Use This Skill\n\nUse this skill when the user needs to:\n\n- **Set up SfRangeSelector** from scratch in a MAUI app\n- **Embed chart content** (`SfCartesianChart` or other views) inside the range selector for interactive data filtering\n- **Customize track appearance** — colors, height, and extent\n- **Configure intervals, ticks, labels, and dividers** for the range scale\n- **Style thumb and overlay** — size, colors, stroke\n- **Configure tooltips** — show always, styling, custom text\n- **Implement selection modes** — discrete, interval selection, drag behaviors\n- **Handle events** — ValueChanged, ValueChanging, LabelCreated\n- **Use MVVM commands** — DragStartedCommand, DragCompletedCommand\n- **Customize labels** — placement, edge placement, styling, offset\n- **Style ticks and dividers** — colors, sizes, strokes\n- **Add visual regions** — active/inactive region colors and strokes\n- **Invert range selector direction** with IsInversed\n- **Format displayed labels** with prefix/suffix via `NumberFormat`\n- **Enable Liquid Glass effect** for modern translucent design\n- **Bind RangeStart/RangeEnd to a ViewModel** for MVVM data binding\n\n## Component Overview\n\nThe **SfRangeSelector** is a .NET MAUI control for selecting a numeric range by dragging dual thumbs over a track. It uniquely supports embedding any content (typically a chart) inside the selector, making it ideal for interactive data filtering.\n\n**Package**: `Syncfusion.Maui.Sliders`  \n**Namespace**: `Syncfusion.Maui.Sliders`  \n**Control**: `SfRangeSelector`\n\n**Key Capabilities:**\n- **Embedded Content**: Any .NET MAUI view (e.g., `SfCartesianChart`) rendered inside the selector\n- **Dual Thumbs**: Drag to define start and end values with full track styling\n- **Interval Controls**: Labels, ticks, minor ticks, and dividers at configurable intervals\n- **Selection Modes**: Discrete steps, interval snapping, and drag behavior options\n- **Rich Customization**: Track colors, thumb styles, tooltip, label/tick/divider styling\n- **Region Support**: Active/inactive region customization\n- **MVVM Ready**: Events, commands, and two-way data binding support\n- **Liquid Glass Effect**: Modern translucent design for iOS/macOS 26+\n\n## Documentation and Navigation Guide\n\n### Getting Started\n📄 **Read:** [references/getting-started.md](references/getting-started.md)\n- NuGet installation (`Syncfusion.Maui.Sliders`)\n- Handler registration in `MauiProgram.cs`\n- Minimal XAML and C# setup\n- Adding chart content via the `Content` property\n- Namespace imports\n\n### Interval Configuration\n📄 **Read:** [references/interval-configuration.md](references/interval-configuration.md)\n- Setting `Interval`, `Minimum`, `Maximum`\n- Auto-interval calculation when `Interval = 0`\n- Showing ticks with `ShowTicks` + `MinorTicksPerInterval`\n- Showing dividers with `ShowDividers`\n- How interval affects labels and ticks rendering\n\n### Display Features\n📄 **Read:** [references/display-features.md](references/display-features.md)\n- Enabling labels with `ShowLabels`\n- Enabling ticks and minor ticks\n- Formatting labels with `NumberFormat` (prefix/suffix)\n- Inverting the selector with `IsInversed`\n- Configuring `RangeStart` and `RangeEnd`\n\n### Content and Chart Integration\n📄 **Read:** [references/content-and-integration.md](references/content-and-integration.md)\n- How the `Content` property works\n- Embedding `SfCartesianChart` with hidden axes\n- ViewModel + `ItemsSource` binding pattern\n- `SplineAreaSeries` setup inside a range selector\n- Tips for using other chart types\n\n### Track Customization\n📄 **Read:** [references/track-customization.md](references/track-customization.md)\n- Minimum and Maximum properties\n- RangeStart and RangeEnd values\n- Track colors (ActiveFill, InactiveFill)\n- Track height (ActiveSize, InactiveSize)\n- Track extent (extending track edges)\n- TrackStyle property and complete styling\n\n### Labels Customization\n📄 **Read:** [references/labels-customization.md](references/labels-customization.md)\n- ShowLabels property\n- NumberFormat for prefix/suffix ($, %, etc.)\n- LabelsPlacement (OnTicks vs BetweenTicks)\n- EdgeLabelsPlacement (Default vs Inside)\n- LabelStyle (colors, fonts, sizes for active/inactive)\n- Label offset customization\n- Custom label text via LabelCreated event\n\n### Ticks and Dividers\n📄 **Read:** [references/ticks-and-dividers.md](references/ticks-and-dividers.md)\n- ShowTicks and major ticks configuration\n- MinorTicksPerInterval for minor ticks\n- MajorTickStyle (colors, sizes, offset)\n- MinorTickStyle (colors, sizes, offset)\n- ShowDividers property\n- DividerStyle (radius, colors, stroke, stroke thickness)\n- Complete tick and divider styling examples\n\n### Selection Modes\n📄 **Read:** [references/selection-modes.md](references/selection-modes.md)\n- Discrete selection with StepSize\n- EnableIntervalSelection property\n- DragBehavior options (OnThumb, BetweenThumbs, Both)\n- EnableDeferredUpdate for performance\n- DeferredUpdateDelay configuration\n- Selection behavior comparisons\n\n### Tooltip Configuration\n📄 **Read:** [references/tooltip-configuration.md](references/tooltip-configuration.md)\n- Enabling tooltip with SliderTooltip\n- ShowAlways property for persistent tooltips\n- Tooltip styling (Fill, Stroke, StrokeThickness)\n- Text styling (TextColor, FontSize, FontFamily, FontAttributes)\n- Padding and Position properties\n- NumberFormat for tooltip text\n- Custom tooltip text via TooltipLabelCreated event\n\n### Thumb and Styling\n📄 **Read:** [references/thumb-and-styling.md](references/thumb-and-styling.md)\n- ThumbStyle properties (Radius, Fill, Stroke, StrokeThickness)\n- OverlapStroke for overlapping thumbs\n- ThumbOverlayStyle (Radius, Fill)\n- Visual regions (ActiveRegionFill, InactiveRegionFill, strokes)\n- Complete styling patterns\n- EnableLiquidGlassEffect for modern translucent design\n- Platform requirements for Liquid Glass\n\n### Events and Commands\n📄 **Read:** [references/events-and-commands.md](references/events-and-commands.md)\n- Value change events (ValueChangeStart, ValueChanging, ValueChanged, ValueChangeEnd)\n- LabelCreated event for custom label text\n- TooltipLabelCreated event for custom tooltip text\n- DragStartedCommand and DragCompletedCommand\n- Command parameters\n- MVVM pattern implementation\n- Complete event handling examples","tags":["syncfusion","maui","range","selector","components","skills","agent-skills"],"capabilities":["skill","source-syncfusion","skill-syncfusion-maui-range-selector","topic-agent-skills"],"categories":["maui-ui-components-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/syncfusion/maui-ui-components-skills/syncfusion-maui-range-selector","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 (6,585 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:09.356Z","embedding":null,"createdAt":"2026-04-18T22:15:39.598Z","updatedAt":"2026-04-22T00:56:09.356Z","lastSeenAt":"2026-04-22T00:56:09.356Z","tsv":"'0':399 '26':353 'active/inactive':191,331,532 'activefil':492 'activeregionfil':663 'actives':496 'ad':375 'add':188 'affect':411 'alway':152 'app':109 'appear':127 'auto':394 'auto-interv':393 'axe':460 'behavior':163,318,601 'betweenthumb':593 'betweentick':522 'bind':217,225,343,463 'c':373 'calcul':396 'capabl':273 'chang':686 'chart':23,75,84,111,255,376,446,475 'color':128,147,185,193,323,491,528,558,562,569 'command':171,337,681,707 'comparison':602 'complet':506,573,666,712 'compon':14,226 'configur':38,132,149,308,385,440,552,599,604 'content':72,112,252,275,377,380,444,453 'control':53,234,270,300 'cover':36 'custom':29,125,154,174,321,333,478,509,535,536,636,695,701 'data':85,123,224,264,342 'default':524 'deferredupdatedelay':598 'defin':290 'design':216,350,673 'direct':199 'discret':159,312,584 'display':203,416 'divid':137,184,306,406,544,576 'dividerstyl':567 'document':354 'drag':62,162,241,288,317 'dragbehavior':590 'dragcompletedcommand':173,706 'dragstartedcommand':172,704 'dual':242,286 'e.g':280 'edg':177,502 'edgelabelsplac':523 'effect':212,347 'emb':110 'embed':22,70,250,274,456 'enabl':209,421,425,608 'enabledeferredupd':595 'enableintervalselect':588 'enableliquidglasseffect':669 'end':293 'etc':518 'event':165,336,541,641,679,687,693,699,713 'exampl':578,715 'extend':500 'extent':131,499 'featur':417 'fill':619,651,660 'filter':83,124,265 'font':529 'fontattribut':627 'fontfamili':626 'fontsiz':625 'format':40,202,430 'full':296 'get':358 'glass':211,346,678 'guid':357 'handl':164,714 'handler':366 'height':129,495 'hidden':459 'ideal':81,261 'implement':6,41,156,711 'import':383 'inactivefil':493 'inactiveregionfil':664 'inactives':497 'input':26 'insid':76,117,256,283,467,526 'instal':364 'integr':447 'interact':122,263 'interv':133,160,299,309,314,384,390,395,398,410 'invert':196,435 'ios/macos':352 'isinvers':201,439 'itemssourc':462 'key':272 'label':39,135,175,204,301,412,422,431,508,533,537,696 'label/tick/divider':327 'labelcr':168,540,692 'labelsplac':519 'labelstyl':527 'let':55 'liquid':210,345,677 'major':550 'majortickstyl':557 'make':79,259 'maui':3,10,35,43,52,108,233,278 'mauiprogram.cs':369 'maximum':392,484 'minim':370 'minimum':391,482 'minor':303,428,555 'minorticksperinterv':404,553 'minortickstyl':561 'mode':158,311,580 'modern':214,348,671 'mvvm':170,223,334,709 'namespac':268,382 'navig':356 'need':99 'net':9,34,42,51,232,277 'nuget':363 'numberformat':208,433,515,632 'numer':24,59,238 'offset':180,534,560,564 'onthumb':592 'ontick':520 'option':319,591 'overlap':656 'overlapstrok':654 'overlay':145 'overview':227 'packag':266 'pad':628 'paramet':708 'pattern':464,668,710 'perform':597 'persist':615 'placement':176,178 'platform':674 'posit':630 'prefix/suffix':206,434,517 'properti':381,454,485,504,514,566,589,613,631,649 'radius':568,650,659 'rang':4,11,19,25,44,60,87,119,140,197,239,469 'rangeend':443,488 'rangestart':441,486 'rangestart/rangeend':27,218 'read':360,386,418,448,479,510,545,581,605,645,682 'readi':335 'references/content-and-integration.md':449,450 'references/display-features.md':419,420 'references/events-and-commands.md':683,684 'references/getting-started.md':361,362 'references/interval-configuration.md':387,388 'references/labels-customization.md':511,512 'references/selection-modes.md':582,583 'references/thumb-and-styling.md':646,647 'references/ticks-and-dividers.md':546,547 'references/tooltip-configuration.md':606,607 'references/track-customization.md':480,481 'region':190,192,329,332,662 'registr':367 'render':282,415 'requir':675 'rich':320 'scale':141 'scratch':105 'select':20,57,157,161,236,310,579,585,600 'selector':5,12,45,78,120,198,258,285,437,470 'set':101,389 'setup':374,466 'sfcartesianchart':113,281,457 'sfrangeselector':13,48,103,229,271 'show':151,400,405 'showalway':612 'showdivid':408,565 'showlabel':424,513 'showtick':403,548 'size':146,186,530,559,563 'skill':92,95 'skill-syncfusion-maui-range-selector' 'slidertooltip':611 'snap':315 'source-syncfusion' 'splineareaseri':465 'start':291,359 'step':313 'stepsiz':587 'stroke':148,187,195,570,571,620,652,665 'strokethick':621,653 'style':32,142,153,179,181,298,325,328,507,577,618,623,644,667 'support':69,249,330,344 'syncfus':2,8,47 'syncfusion-maui-range-selector':1 'syncfusion.maui.sliders':267,269,365 'text':155,538,622,635,638,697,703 'textcolor':624 'thick':572 'thumb':31,63,143,243,287,324,642,657 'thumboverlaystyl':658 'thumbstyl':648 'tick':134,182,302,304,401,414,426,429,542,551,556,574 'tip':471 'tooltip':37,150,326,603,609,616,617,634,637,702 'tooltiplabelcr':640,698 'topic-agent-skills' 'track':28,66,126,246,297,322,477,490,494,498,501 'trackstyl':503 'transluc':215,349,672 'two':340 'two-way':339 'type':476 'typic':73,253 'uniqu':68,248 'use':15,90,93,169,473 'user':56,98 'valu':294,489,685 'valuechang':166,167,689,690 'valuechangeend':691 'valuechangestart':688 'via':207,378,539,639 'view':116,279 'viewmodel':221,461 'visual':189,661 'vs':521,525 'way':341 'work':17,455 'xaml':371","prices":[{"id":"5e263d70-6b0f-42d1-b8ab-46b4b55070e2","listingId":"27624c7a-0571-418c-a0be-851e2ef2bead","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:39.598Z"}],"sources":[{"listingId":"27624c7a-0571-418c-a0be-851e2ef2bead","source":"github","sourceId":"syncfusion/maui-ui-components-skills/syncfusion-maui-range-selector","sourceUrl":"https://github.com/syncfusion/maui-ui-components-skills/tree/master/skills/syncfusion-maui-range-selector","isPrimary":false,"firstSeenAt":"2026-04-18T22:15:39.598Z","lastSeenAt":"2026-04-22T00:56:09.356Z"}],"details":{"listingId":"27624c7a-0571-418c-a0be-851e2ef2bead","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"syncfusion","slug":"syncfusion-maui-range-selector","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":"2bb37a0c3e65e2f6954cf45ea6a96cd8edb310c9","skill_md_path":"skills/syncfusion-maui-range-selector/SKILL.md","default_branch":"master","skill_tree_url":"https://github.com/syncfusion/maui-ui-components-skills/tree/master/skills/syncfusion-maui-range-selector"},"layout":"multi","source":"github","category":"maui-ui-components-skills","frontmatter":{"name":"syncfusion-maui-range-selector","description":"Implements the Syncfusion .NET MAUI Range Selector (SfRangeSelector) component. Use when working with range selection with embedded charts, numeric range input, RangeStart/RangeEnd, track customization, or thumb styling in .NET MAUI. Covers tooltip configuration, label formatting, ticks/dividers, selection modes, events, and embedding SfCartesianChart inside a range control."},"skills_sh_url":"https://skills.sh/syncfusion/maui-ui-components-skills/syncfusion-maui-range-selector"},"updatedAt":"2026-04-22T00:56:09.356Z"}}