# Syncfusion Maui Range Slider

> 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.

- Skill: `gabrielmoreira/syncfusion-maui-range-slider` (Agent Skill, multi-file: 11 files)
- Install (CLI): `npx skillmds@latest add gabrielmoreira/syncfusion-maui-range-slider`
- Raw SKILL.md: https://api.skillmd.com/api/skills/gabrielmoreira/syncfusion-maui-range-slider/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: gabrielmoreira (https://skillmd.com/u/gabrielmoreira)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/gabrielmoreira/syncfusion-maui-range-slider

---


# 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](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](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](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](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](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](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](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](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](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](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