syncfusion-maui-range-selector

Name: syncfusion-maui-range-selector
Author: syncfusion

120installs1forks

How to install syncfusion-maui-range-selector?

syncfusion/maui-ui-components-skills/syncfusion-maui-range-selector

$npx -y skills add syncfusion/maui-ui-components-skills --skill syncfusion-maui-range-selector

Installs into the current project.

Summary

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

Files · 1

View on GitHub

SKILL.md

1	# Implementing .NET MAUI Range Selector
2
3	The 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.
4
5	## When to Use This Skill
6
7	Use this skill when the user needs to:
8
9	- Set up SfRangeSelector from scratch in a MAUI app
10	- Embed chart content (`SfCartesianChart` or other views) inside the range selector for interactive data filtering
11	- Customize track appearance — colors, height, and extent
12	- Configure intervals, ticks, labels, and dividers for the range scale
13	- Style thumb and overlay — size, colors, stroke
14	- Configure tooltips — show always, styling, custom text
15	- Implement selection modes — discrete, interval selection, drag behaviors
16	- Handle events — ValueChanged, ValueChanging, LabelCreated
17	- Use MVVM commands — DragStartedCommand, DragCompletedCommand
18	- Customize labels — placement, edge placement, styling, offset
19	- Style ticks and dividers — colors, sizes, strokes
20	- Add visual regions — active/inactive region colors and strokes
21	- Invert range selector direction with IsInversed
22	- Format displayed labels with prefix/suffix via `NumberFormat`
23	- Enable Liquid Glass effect for modern translucent design
24	- Bind RangeStart/RangeEnd to a ViewModel for MVVM data binding
25
26	## Component Overview
27
28	The 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.
29
30	Package: `Syncfusion.Maui.Sliders`
31	Namespace: `Syncfusion.Maui.Sliders`
32	Control: `SfRangeSelector`
33
34	Key Capabilities:
35	- Embedded Content: Any .NET MAUI view (e.g., `SfCartesianChart`) rendered inside the selector
36	- Dual Thumbs: Drag to define start and end values with full track styling
37	- Interval Controls: Labels, ticks, minor ticks, and dividers at configurable intervals
38	- Selection Modes: Discrete steps, interval snapping, and drag behavior options
39	- Rich Customization: Track colors, thumb styles, tooltip, label/tick/divider styling
40	- Region Support: Active/inactive region customization
41	- MVVM Ready: Events, commands, and two-way data binding support
42	- Liquid Glass Effect: Modern translucent design for iOS/macOS 26+
43
44	## Documentation and Navigation Guide
45
46	### Getting Started
47	📄 Read: [references/getting-started.md](references/getting-started.md)
48	- NuGet installation (`Syncfusion.Maui.Sliders`)
49	- Handler registration in `MauiProgram.cs`
50	- Minimal XAML and C# setup
51	- Adding chart content via the `Content` property
52	- Namespace imports
53
54	### Interval Configuration
55	📄 Read: [references/interval-configuration.md](references/interval-configuration.md)
56	- Setting `Interval`, `Minimum`, `Maximum`
57	- Auto-interval calculation when `Interval = 0`
58	- Showing ticks with `ShowTicks` + `MinorTicksPerInterval`
59	- Showing dividers with `ShowDividers`
60	- How interval affects labels and ticks rendering
61
62	### Display Features
63	📄 Read: [references/display-features.md](references/display-features.md)
64	- Enabling labels with `ShowLabels`
65	- Enabling ticks and minor ticks
66	- Formatting labels with `NumberFormat` (prefix/suffix)
67	- Inverting the selector with `IsInversed`
68	- Configuring `RangeStart` and `RangeEnd`
69
70	### Content and Chart Integration
71	📄 Read: [references/content-and-integration.md](references/content-and-integration.md)
72	- How the `Content` property works
73	- Embedding `SfCartesianChart` with hidden axes
74	- ViewModel + `ItemsSource` binding pattern
75	- `SplineAreaSeries` setup inside a range selector
76	- Tips for using other chart types
77
78	### Track Customization
79	📄 Read: [references/track-customization.md](references/track-customization.md)
80	- Minimum and Maximum properties
81	- RangeStart and RangeEnd values
82	- Track colors (ActiveFill, InactiveFill)
83	- Track height (ActiveSize, InactiveSize)
84	- Track extent (extending track edges)
85	- TrackStyle property and complete styling
86
87	### Labels Customization
88	📄 Read: [references/labels-customization.md](references/labels-customization.md)
89	- ShowLabels property
90	- NumberFormat for prefix/suffix ($, %, etc.)
91	- LabelsPlacement (OnTicks vs BetweenTicks)
92	- EdgeLabelsPlacement (Default vs Inside)
93	- LabelStyle (colors, fonts, sizes for active/inactive)
94	-

People who liked this also viewed

6 picks

Type

syncfusion-maui-range-selector

120installs1forks

View on GitHub

How to install syncfusion-maui-range-selector?

syncfusion/maui-ui-components-skills/syncfusion-maui-range-selector

$npx -y skills add syncfusion/maui-ui-components-skills --skill syncfusion-maui-range-selector

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Implementing .NET MAUI Range Selector
2
3	The 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.
4
5	## When to Use This Skill
6
7	Use this skill when the user needs to:
8
9	- Set up SfRangeSelector from scratch in a MAUI app
10	- Embed chart content (`SfCartesianChart` or other views) inside the range selector for interactive data filtering
11	- Customize track appearance — colors, height, and extent
12	- Configure intervals, ticks, labels, and dividers for the range scale
13	- Style thumb and overlay — size, colors, stroke
14	- Configure tooltips — show always, styling, custom text
15	- Implement selection modes — discrete, interval selection, drag behaviors
16	- Handle events — ValueChanged, ValueChanging, LabelCreated
17	- Use MVVM commands — DragStartedCommand, DragCompletedCommand
18	- Customize labels — placement, edge placement, styling, offset
19	- Style ticks and dividers — colors, sizes, strokes
20	- Add visual regions — active/inactive region colors and strokes
21	- Invert range selector direction with IsInversed
22	- Format displayed labels with prefix/suffix via `NumberFormat`
23	- Enable Liquid Glass effect for modern translucent design
24	- Bind RangeStart/RangeEnd to a ViewModel for MVVM data binding
25
26	## Component Overview
27
28	The 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.
29
30	Package: `Syncfusion.Maui.Sliders`
31	Namespace: `Syncfusion.Maui.Sliders`
32	Control: `SfRangeSelector`
33
34	Key Capabilities:
35	- Embedded Content: Any .NET MAUI view (e.g., `SfCartesianChart`) rendered inside the selector
36	- Dual Thumbs: Drag to define start and end values with full track styling
37	- Interval Controls: Labels, ticks, minor ticks, and dividers at configurable intervals
38	- Selection Modes: Discrete steps, interval snapping, and drag behavior options
39	- Rich Customization: Track colors, thumb styles, tooltip, label/tick/divider styling
40	- Region Support: Active/inactive region customization
41	- MVVM Ready: Events, commands, and two-way data binding support
42	- Liquid Glass Effect: Modern translucent design for iOS/macOS 26+
43
44	## Documentation and Navigation Guide
45
46	### Getting Started
47	📄 Read: [references/getting-started.md](references/getting-started.md)
48	- NuGet installation (`Syncfusion.Maui.Sliders`)
49	- Handler registration in `MauiProgram.cs`
50	- Minimal XAML and C# setup
51	- Adding chart content via the `Content` property
52	- Namespace imports
53
54	### Interval Configuration
55	📄 Read: [references/interval-configuration.md](references/interval-configuration.md)
56	- Setting `Interval`, `Minimum`, `Maximum`
57	- Auto-interval calculation when `Interval = 0`
58	- Showing ticks with `ShowTicks` + `MinorTicksPerInterval`
59	- Showing dividers with `ShowDividers`
60	- How interval affects labels and ticks rendering
61
62	### Display Features
63	📄 Read: [references/display-features.md](references/display-features.md)
64	- Enabling labels with `ShowLabels`
65	- Enabling ticks and minor ticks
66	- Formatting labels with `NumberFormat` (prefix/suffix)
67	- Inverting the selector with `IsInversed`
68	- Configuring `RangeStart` and `RangeEnd`
69
70	### Content and Chart Integration
71	📄 Read: [references/content-and-integration.md](references/content-and-integration.md)
72	- How the `Content` property works
73	- Embedding `SfCartesianChart` with hidden axes
74	- ViewModel + `ItemsSource` binding pattern
75	- `SplineAreaSeries` setup inside a range selector
76	- Tips for using other chart types
77
78	### Track Customization
79	📄 Read: [references/track-customization.md](references/track-customization.md)
80	- Minimum and Maximum properties
81	- RangeStart and RangeEnd values
82	- Track colors (ActiveFill, InactiveFill)
83	- Track height (ActiveSize, InactiveSize)
84	- Track extent (extending track edges)
85	- TrackStyle property and complete styling
86
87	### Labels Customization
88	📄 Read: [references/labels-customization.md](references/labels-customization.md)
89	- ShowLabels property
90	- NumberFormat for prefix/suffix ($, %, etc.)
91	- LabelsPlacement (OnTicks vs BetweenTicks)
92	- EdgeLabelsPlacement (Default vs Inside)
93	- LabelStyle (colors, fonts, sizes for active/inactive)
94	-

People who liked this also viewed

6 picks

Type