{"id":"f8ad888b-f75a-4196-8a46-6c6558772112","shortId":"6yczUd","kind":"skill","title":"syncfusion-maui-range-slider","tagline":"Implements Syncfusion .NET MAUI Range Slider (SfRangeSlider) for selecting numeric range values with dual thumbs. Use this for range selection controls, dual-value sliders, price range selectors, date range filters, or scenarios requiring minimum-maximum value selection with inte","description":"# Implementing .NET MAUI Range Slider\n\nThe Syncfusion .NET MAUI Range Slider (SfRangeSlider) is a highly interactive UI control that allows users to select a range of values between a defined minimum and maximum. It offers a rich set of features, including track customization, labels, ticks, dividers, and tooltips, enabling the creation of intuitive and visually appealing range selection experiences.\n\n## When to Use This Skill\n\nUse this skill when the user needs to:\n\n- Implement a range slider with dual thumbs for selecting minimum and maximum values\n- Create price range selectors (e.g., filter products between $50-$500)\n- Build date/time range selection controls\n- Implement volume, brightness, or temperature range controls\n- Create numeric range filters for data visualization\n- Build custom range input controls with labels, ticks, and tooltips\n- Implement discrete or continuous range selection with step values\n- Customize range slider appearance with colors, sizes, and styles\n- Handle range value changes with events and commands\n- Create accessible range selection interfaces with ARIA support\n\n**Key capabilities**: Dual-thumb interaction, numeric ranges, intervals, discrete selection, custom styling, tooltips, labels, ticks, dividers, events, MVVM commands, RTL support, and liquid glass effects.\n\n## Component Overview\n\nThe Syncfusion .NET MAUI Range Slider (`SfRangeSlider`) is an interactive UI control for selecting a range of values between a minimum and maximum limit. It provides dual thumbs that users drag to define start and end values, with rich visual features including track styling, labels, ticks, dividers, and tooltips.\n\n**Package**: `Syncfusion.Maui.Sliders`  \n**Namespace**: `Syncfusion.Maui.Sliders`  \n**Control**: `SfRangeSlider`\n\n## Documentation and Navigation Guide\n\n### Getting Started\n📄 **Read:** [references/getting-started.md](references/getting-started.md)  \nWhen implementing your first range slider. Covers:\n- NuGet package installation (Syncfusion.Maui.Sliders)\n- Handler registration (ConfigureSyncfusionCore)\n- Basic SfRangeSlider initialization\n- Namespace imports and minimal examples\n- IDE-specific setup (Visual Studio, VS Code, Rider)\n\n### Track Customization\n📄 **Read:** [references/track.md](references/track.md)  \nWhen customizing the slider track appearance and behavior. Covers:\n- Setting Minimum, Maximum, RangeStart, RangeEnd\n- Track colors (ActiveFill, InactiveFill)\n- Track sizing (ActiveSize, InactiveSize)\n- Track extent for edge extension\n- Orientation (Horizontal, Vertical)\n- IsInversed property for reversed direction\n\n### Thumbs and Overlays\n📄 **Read:** [references/thumbs-and-overlays.md](references/thumbs-and-overlays.md)  \nWhen customizing thumb appearance and interaction feedback. Covers:\n- Thumb size (Radius)\n- Custom thumb icons (StartThumbIcon, EndThumbIcon)\n- Thumb colors (Fill, Stroke, StrokeThickness)\n- OverlapStroke for overlapping thumbs\n- Thumb overlay configuration\n- Visual states for disabled thumbs\n\n### Labels and Formatting\n📄 **Read:** [references/labels.md](references/labels.md)  \nWhen displaying and formatting value labels. Covers:\n- ShowLabels property\n- NumberFormat for custom formatting\n- Label placement (OnTicks, BetweenTicks)\n- Edge labels placement\n- Label styles (colors, fonts, offset)\n- LabelCreated event for dynamic formatting\n\n### Ticks Configuration\n📄 **Read:** [references/ticks.md](references/ticks.md)  \nWhen adding visual markers on the track. Covers:\n- ShowTicks for major ticks\n- MinorTicksPerInterval for minor ticks\n- Tick colors (ActiveFill, InactiveFill)\n- Tick sizes (ActiveSize, InactiveSize)\n- Tick offset and styling\n- Visual states for disabled ticks\n\n### Dividers\n📄 **Read:** [references/dividers.md](references/dividers.md)  \nWhen adding visual separators at interval points. Covers:\n- ShowDividers property\n- Divider radius and colors\n- Divider stroke and thickness\n- DividerStyle configuration\n- Visual states for disabled dividers\n\n### Intervals and Selection\n📄 **Read:** [references/intervals-and-selection.md](references/intervals-and-selection.md)  \nWhen configuring interval behavior and selection modes. Covers:\n- Interval property for spacing\n- StepSize for discrete selection\n- EnableIntervalSelection\n- DragBehavior (OnThumb, BetweenThumbs, Both)\n- EnableDeferredUpdate for performance\n- DeferredUpdateDelay configuration\n\n### Tooltips\n📄 **Read:** [references/tooltips.md](references/tooltips.md)  \nWhen displaying value tooltips during interaction. Covers:\n- Enabling tooltips (SliderTooltip)\n- ShowAlways property\n- Tooltip styling (Fill, Stroke, TextColor)\n- Font and padding customization\n- TooltipLabelCreated event for formatting\n\n### Events and Commands\n📄 **Read:** [references/events-and-commands.md](references/events-and-commands.md)  \nWhen handling value changes and user interactions. Covers:\n- ValueChangeStart, ValueChanging, ValueChanged, ValueChangeEnd\n- LabelCreated and TooltipLabelCreated events\n- DragStartedCommand, DragCompletedCommand\n- Command parameters and MVVM patterns\n- Event arguments and custom logic\n\n### Liquid Glass Effect\n📄 **Read:** [references/liquid-glass-effect.md](references/liquid-glass-effect.md)  \nWhen implementing modern translucent design. Covers:\n- EnableLiquidGlassEffect property\n- Platform requirements (.NET 10, iOS 26, macOS 26)\n- Background image setup\n- Visual interaction feedback\n- Use cases and best practices","tags":["syncfusion","maui","range","slider","components","skills","agent-skills"],"capabilities":["skill","source-syncfusion","skill-syncfusion-maui-range-slider","topic-agent-skills"],"categories":["maui-ui-components-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/syncfusion/maui-ui-components-skills/syncfusion-maui-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,424 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.438Z","embedding":null,"createdAt":"2026-04-18T22:15:40.376Z","updatedAt":"2026-04-22T00:56:09.438Z","lastSeenAt":"2026-04-22T00:56:09.438Z","tsv":"'10':622 '26':624,626 '50':140 '500':141 'access':198 'activefil':349,466 'actives':353,470 'ad':449,486 'allow':66 'appeal':102 'appear':183,338,377 'argument':601 'aria':203 'background':627 'basic':311 'behavior':340,519 'best':636 'betweenthumb':535 'betweentick':429 'bright':149 'build':142,161 'capabl':206 'case':634 'chang':192,580 'code':326 'color':185,348,391,435,465,498 'command':196,224,573,595 'compon':231 'configur':401,444,504,517,541 'configuresyncfusioncor':310 'continu':174 'control':26,64,146,153,165,244,286 'cover':303,341,381,419,455,492,523,552,584,616 'creat':132,154,197 'creation':97 'custom':89,162,180,216,329,334,375,385,424,566,603 'data':159 'date':34 'date/time':143 'deferredupdatedelay':540 'defin':76,265 'design':615 'direct':367 'disabl':405,479,508 'discret':172,214,530 'display':414,547 'divid':92,221,279,481,495,499,509 'dividerstyl':503 'document':288 'drag':263 'dragbehavior':533 'dragcompletedcommand':594 'dragstartedcommand':593 'dual':19,28,124,208,259 'dual-thumb':207 'dual-valu':27 'dynam':441 'e.g':136 'edg':358,430 'effect':230,607 'enabl':95,553 'enabledeferredupd':537 'enableintervalselect':532 'enableliquidglasseffect':617 'end':268 'endthumbicon':389 'event':194,222,439,568,571,592,600 'exampl':318 'experi':105 'extens':359 'extent':356 'featur':86,273 'feedback':380,632 'fill':392,560 'filter':36,137,157 'first':300 'font':436,563 'format':409,416,425,442,570 'get':292 'glass':229,606 'guid':291 'handl':189,578 'handler':308 'high':61 'horizont':361 'icon':387 'ide':320 'ide-specif':319 'imag':628 'implement':6,47,119,147,171,298,612 'import':315 'inactivefil':350,467 'inactives':354,471 'includ':87,274 'initi':313 'input':164 'instal':306 'int':46 'interact':62,210,242,379,551,583,631 'interfac':201 'interv':213,490,510,518,524 'intuit':99 'io':623 'isinvers':363 'key':205 'label':90,167,219,277,407,418,426,431,433 'labelcr':438,589 'limit':256 'liquid':228,605 'logic':604 'maco':625 'major':458 'marker':451 'maui':3,9,49,55,236 'maximum':42,79,130,255,344 'minim':317 'minimum':41,77,128,253,343 'minimum-maximum':40 'minor':462 'minorticksperinterv':460 'mode':522 'modern':613 'mvvm':223,598 'namespac':284,314 'navig':290 'need':117 'net':8,48,54,235,621 'nuget':304 'numberformat':422 'numer':15,155,211 'offer':81 'offset':437,473 'onthumb':534 'ontick':428 'orient':360 'overlap':397 'overlapstrok':395 'overlay':370,400 'overview':232 'packag':282,305 'pad':565 'paramet':596 'pattern':599 'perform':539 'placement':427,432 'platform':619 'point':491 'practic':637 'price':31,133 'product':138 'properti':364,421,494,525,557,618 'provid':258 'radius':384,496 'rang':4,10,16,24,32,35,50,56,71,103,121,134,144,152,156,163,175,181,190,199,212,237,248,301 'rangeend':346 'rangestart':345 'read':294,330,371,410,445,482,513,543,574,608 'references/dividers.md':483,484 'references/events-and-commands.md':575,576 'references/getting-started.md':295,296 'references/intervals-and-selection.md':514,515 'references/labels.md':411,412 'references/liquid-glass-effect.md':609,610 'references/thumbs-and-overlays.md':372,373 'references/ticks.md':446,447 'references/tooltips.md':544,545 'references/track.md':331,332 'registr':309 'requir':39,620 'revers':366 'rich':83,271 'rider':327 'rtl':225 'scenario':38 'select':14,25,44,69,104,127,145,176,200,215,246,512,521,531 'selector':33,135 'separ':488 'set':84,342 'setup':322,629 'sfrangeslid':12,58,239,287,312 'showalway':556 'showdivid':493 'showlabel':420 'showtick':456 'size':186,352,383,469 'skill':110,113 'skill-syncfusion-maui-range-slider' 'slider':5,11,30,51,57,122,182,238,302,336 'slidertooltip':555 'source-syncfusion' 'space':527 'specif':321 'start':266,293 'startthumbicon':388 'state':403,477,506 'step':178 'stepsiz':528 'stroke':393,500,561 'strokethick':394 'studio':324 'style':188,217,276,434,475,559 'support':204,226 'syncfus':2,7,53,234 'syncfusion-maui-range-slid':1 'syncfusion.maui.sliders':283,285,307 'temperatur':151 'textcolor':562 'thick':502 'thumb':20,125,209,260,368,376,382,386,390,398,399,406 'tick':91,168,220,278,443,459,463,464,468,472,480 'tooltip':94,170,218,281,542,549,554,558 'tooltiplabelcr':567,591 'topic-agent-skills' 'track':88,275,328,337,347,351,355,454 'transluc':614 'ui':63,243 'use':21,108,111,633 'user':67,116,262,582 'valu':17,29,43,73,131,179,191,250,269,417,548,579 'valuechang':586,587 'valuechangeend':588 'valuechangestart':585 'vertic':362 'visual':101,160,272,323,402,450,476,487,505,630 'volum':148 'vs':325","prices":[{"id":"205a59d6-f46d-4b4c-ba6d-b20c3bfc21bc","listingId":"f8ad888b-f75a-4196-8a46-6c6558772112","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:40.376Z"}],"sources":[{"listingId":"f8ad888b-f75a-4196-8a46-6c6558772112","source":"github","sourceId":"syncfusion/maui-ui-components-skills/syncfusion-maui-range-slider","sourceUrl":"https://github.com/syncfusion/maui-ui-components-skills/tree/master/skills/syncfusion-maui-range-slider","isPrimary":false,"firstSeenAt":"2026-04-18T22:15:40.376Z","lastSeenAt":"2026-04-22T00:56:09.438Z"}],"details":{"listingId":"f8ad888b-f75a-4196-8a46-6c6558772112","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"syncfusion","slug":"syncfusion-maui-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":"8848744925aa62b6ebae568e00b1042d949c91f7","skill_md_path":"skills/syncfusion-maui-range-slider/SKILL.md","default_branch":"master","skill_tree_url":"https://github.com/syncfusion/maui-ui-components-skills/tree/master/skills/syncfusion-maui-range-slider"},"layout":"multi","source":"github","category":"maui-ui-components-skills","frontmatter":{"name":"syncfusion-maui-range-slider","description":"Implements Syncfusion .NET MAUI Range Slider (SfRangeSlider) for selecting numeric range values with dual thumbs. Use this for range selection controls, dual-value sliders, price range selectors, date range filters, or scenarios requiring minimum-maximum value selection with interactive thumbs."},"skills_sh_url":"https://skills.sh/syncfusion/maui-ui-components-skills/syncfusion-maui-range-slider"},"updatedAt":"2026-04-22T00:56:09.438Z"}}