gabrielmoreira Implementing .NET MAUI Range Slider
The 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.
When to Use This Skill
Use this skill when the user needs to:
- Implement a range slider with dual thumbs for selecting minimum and maximum values
- Create price range selectors (e.g., filter products between $50-$500)
- Build date/time range selection controls
- Implement volume, brightness, or temperature range controls
- Create numeric range filters for data visualization
- Build custom range input controls with labels, ticks, and tooltips
- Implement discrete or continuous range selection with step values
- Customize range slider appearance with colors, sizes, and styles
- Handle range value changes with events and commands
- Create accessible range selection interfaces with ARIA support
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.
Component Overview
The 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.
Package: Syncfusion.Maui.Sliders
Namespace: Syncfusion.Maui.Sliders
Control: SfRangeSlider
Documentation and Navigation Guide
Getting Started
📄 Read: references/getting-started.md
When implementing your first range slider. Covers:
- NuGet package installation (Syncfusion.Maui.Sliders)
- Handler registration (ConfigureSyncfusionCore)
- Basic SfRangeSlider initialization
- Namespace imports and minimal examples
- IDE-specific setup (Visual Studio, VS Code, Rider)
Track Customization
📄 Read: references/track.md
When customizing the slider track appearance and behavior. Covers:
- Setting Minimum, Maximum, RangeStart, RangeEnd
- Track colors (ActiveFill, InactiveFill)
- Track sizing (ActiveSize, InactiveSize)
- Track extent for edge extension
- Orientation (Horizontal, Vertical)
- IsInversed property for reversed direction
Thumbs and Overlays
📄 Read: references/thumbs-and-overlays.md
When customizing thumb appearance and interaction feedback. Covers:
- Thumb size (Radius)
- Custom thumb icons (StartThumbIcon, EndThumbIcon)
- Thumb colors (Fill, Stroke, StrokeThickness)
- OverlapStroke for overlapping thumbs
- Thumb overlay configuration
- Visual states for disabled thumbs
Labels and Formatting
📄 Read: references/labels.md
When displaying and formatting value labels. Covers:
- ShowLabels property
- NumberFormat for custom formatting
- Label placement (OnTicks, BetweenTicks)
- Edge labels placement
- Label styles (colors, fonts, offset)
- LabelCreated event for dynamic formatting
Ticks Configuration
📄 Read: references/ticks.md
When adding visual markers on the track. Covers:
- ShowTicks for major ticks
- MinorTicksPerInterval for minor ticks
- Tick colors (ActiveFill, InactiveFill)
- Tick sizes (ActiveSize, InactiveSize)
- Tick offset and styling
- Visual states for disabled ticks
Dividers
📄 Read: references/dividers.md
When adding visual separators at interval points. Covers:
- ShowDividers property
- Divider radius and colors
- Divider stroke and thickness
- DividerStyle configuration
- Visual states for disabled dividers
Intervals and Selection
📄 Read: references/intervals-and-selection.md
When configuring interval behavior and selection modes. Covers:
- Interval property for spacing
- StepSize for discrete selection
- EnableIntervalSelection
- DragBehavior (OnThumb, BetweenThumbs, Both)
- EnableDeferredUpdate for performance
- DeferredUpdateDelay configuration
Tooltips
📄 Read: references/tooltips.md
When displaying value tooltips during interaction. Covers:
- Enabling tooltips (SliderTooltip)
- ShowAlways property
- Tooltip styling (Fill, Stroke, TextColor)
- Font and padding customization
- TooltipLabelCreated event for formatting
Events and Commands
📄 Read: references/events-and-commands.md
When handling value changes and user interactions. Covers:
- ValueChangeStart, ValueChanging, ValueChanged, ValueChangeEnd
- LabelCreated and TooltipLabelCreated events
- DragStartedCommand, DragCompletedCommand
- Command parameters and MVVM patterns
- Event arguments and custom logic
Liquid Glass Effect
📄 Read: references/liquid-glass-effect.md
When implementing modern translucent design. Covers:
- EnableLiquidGlassEffect property
- Platform requirements (.NET 10, iOS 26, macOS 26)
- Background image setup
- Visual interaction feedback
- Use cases and best practices