syncfusion-maui-range-slider

Name: syncfusion-maui-range-slider
Author: syncfusion

121installs1forks

How to install syncfusion-maui-range-slider?

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

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

Installs into the current project.

Summary

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

Files · 1

View on GitHub

SKILL.md

1	# Implementing .NET MAUI Range Slider
2
3	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.
4
5	## When to Use This Skill
6
7	Use this skill when the user needs to:
8
9	- Implement a range slider with dual thumbs for selecting minimum and maximum values
10	- Create price range selectors (e.g., filter products between $50-$500)
11	- Build date/time range selection controls
12	- Implement volume, brightness, or temperature range controls
13	- Create numeric range filters for data visualization
14	- Build custom range input controls with labels, ticks, and tooltips
15	- Implement discrete or continuous range selection with step values
16	- Customize range slider appearance with colors, sizes, and styles
17	- Handle range value changes with events and commands
18	- Create accessible range selection interfaces with ARIA support
19
20	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.
21
22	## Component Overview
23
24	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.
25
26	Package: `Syncfusion.Maui.Sliders`
27	Namespace: `Syncfusion.Maui.Sliders`
28	Control: `SfRangeSlider`
29
30	## Documentation and Navigation Guide
31
32	### Getting Started
33	📄 Read: [references/getting-started.md](references/getting-started.md)
34	When implementing your first range slider. Covers:
35	- NuGet package installation (Syncfusion.Maui.Sliders)
36	- Handler registration (ConfigureSyncfusionCore)
37	- Basic SfRangeSlider initialization
38	- Namespace imports and minimal examples
39	- IDE-specific setup (Visual Studio, VS Code, Rider)
40
41	### Track Customization
42	📄 Read: [references/track.md](references/track.md)
43	When customizing the slider track appearance and behavior. Covers:
44	- Setting Minimum, Maximum, RangeStart, RangeEnd
45	- Track colors (ActiveFill, InactiveFill)
46	- Track sizing (ActiveSize, InactiveSize)
47	- Track extent for edge extension
48	- Orientation (Horizontal, Vertical)
49	- IsInversed property for reversed direction
50
51	### Thumbs and Overlays
52	📄 Read: [references/thumbs-and-overlays.md](references/thumbs-and-overlays.md)
53	When customizing thumb appearance and interaction feedback. Covers:
54	- Thumb size (Radius)
55	- Custom thumb icons (StartThumbIcon, EndThumbIcon)
56	- Thumb colors (Fill, Stroke, StrokeThickness)
57	- OverlapStroke for overlapping thumbs
58	- Thumb overlay configuration
59	- Visual states for disabled thumbs
60
61	### Labels and Formatting
62	📄 Read: [references/labels.md](references/labels.md)
63	When displaying and formatting value labels. Covers:
64	- ShowLabels property
65	- NumberFormat for custom formatting
66	- Label placement (OnTicks, BetweenTicks)
67	- Edge labels placement
68	- Label styles (colors, fonts, offset)
69	- LabelCreated event for dynamic formatting
70
71	### Ticks Configuration
72	📄 Read: [references/ticks.md](references/ticks.md)
73	When adding visual markers on the track. Covers:
74	- ShowTicks for major ticks
75	- MinorTicksPerInterval for minor ticks
76	- Tick colors (ActiveFill, InactiveFill)
77	- Tick sizes (ActiveSize, InactiveSize)
78	- Tick offset and styling
79	- Visual states for disabled ticks
80
81	### Dividers
82	📄 Read: [references/dividers.md](references/dividers.md)
83	When adding visual separators at interval points. Covers:
84	- ShowDividers property
85	- Divider radius and colors
86	- Divider stroke and thickness
87	- DividerStyle configuration
88	- Visual states for disabled dividers
89
90	### Intervals and Selection
91	📄 Read: [references/intervals-and-selection.md](references/intervals-and-selection.md)
92	When configuring interval behavior and selection modes. Covers:
93	- Interval property for spacing
94	- StepSize for discrete selection
95	- EnableIntervalSelection
96	- DragBehavior (OnThumb, BetweenThumbs, Both)
97	- EnableDeferredUpdate for performance
98	- DeferredUpdateDelay configuration
99
100	### Tooltips
101	📄 Read: [references/tooltips.md](references/tooltips.md)
102	When displaying value tooltips during interaction. Covers:
103	- Enabling tooltips (SliderTooltip)
104	- ShowAlways property
105	- Tooltip styling

People who liked this also viewed

6 picks

Type

syncfusion-maui-range-slider

121installs1forks

View on GitHub

How to install syncfusion-maui-range-slider?

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

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

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Implementing .NET MAUI Range Slider
2
3	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.
4
5	## When to Use This Skill
6
7	Use this skill when the user needs to:
8
9	- Implement a range slider with dual thumbs for selecting minimum and maximum values
10	- Create price range selectors (e.g., filter products between $50-$500)
11	- Build date/time range selection controls
12	- Implement volume, brightness, or temperature range controls
13	- Create numeric range filters for data visualization
14	- Build custom range input controls with labels, ticks, and tooltips
15	- Implement discrete or continuous range selection with step values
16	- Customize range slider appearance with colors, sizes, and styles
17	- Handle range value changes with events and commands
18	- Create accessible range selection interfaces with ARIA support
19
20	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.
21
22	## Component Overview
23
24	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.
25
26	Package: `Syncfusion.Maui.Sliders`
27	Namespace: `Syncfusion.Maui.Sliders`
28	Control: `SfRangeSlider`
29
30	## Documentation and Navigation Guide
31
32	### Getting Started
33	📄 Read: [references/getting-started.md](references/getting-started.md)
34	When implementing your first range slider. Covers:
35	- NuGet package installation (Syncfusion.Maui.Sliders)
36	- Handler registration (ConfigureSyncfusionCore)
37	- Basic SfRangeSlider initialization
38	- Namespace imports and minimal examples
39	- IDE-specific setup (Visual Studio, VS Code, Rider)
40
41	### Track Customization
42	📄 Read: [references/track.md](references/track.md)
43	When customizing the slider track appearance and behavior. Covers:
44	- Setting Minimum, Maximum, RangeStart, RangeEnd
45	- Track colors (ActiveFill, InactiveFill)
46	- Track sizing (ActiveSize, InactiveSize)
47	- Track extent for edge extension
48	- Orientation (Horizontal, Vertical)
49	- IsInversed property for reversed direction
50
51	### Thumbs and Overlays
52	📄 Read: [references/thumbs-and-overlays.md](references/thumbs-and-overlays.md)
53	When customizing thumb appearance and interaction feedback. Covers:
54	- Thumb size (Radius)
55	- Custom thumb icons (StartThumbIcon, EndThumbIcon)
56	- Thumb colors (Fill, Stroke, StrokeThickness)
57	- OverlapStroke for overlapping thumbs
58	- Thumb overlay configuration
59	- Visual states for disabled thumbs
60
61	### Labels and Formatting
62	📄 Read: [references/labels.md](references/labels.md)
63	When displaying and formatting value labels. Covers:
64	- ShowLabels property
65	- NumberFormat for custom formatting
66	- Label placement (OnTicks, BetweenTicks)
67	- Edge labels placement
68	- Label styles (colors, fonts, offset)
69	- LabelCreated event for dynamic formatting
70
71	### Ticks Configuration
72	📄 Read: [references/ticks.md](references/ticks.md)
73	When adding visual markers on the track. Covers:
74	- ShowTicks for major ticks
75	- MinorTicksPerInterval for minor ticks
76	- Tick colors (ActiveFill, InactiveFill)
77	- Tick sizes (ActiveSize, InactiveSize)
78	- Tick offset and styling
79	- Visual states for disabled ticks
80
81	### Dividers
82	📄 Read: [references/dividers.md](references/dividers.md)
83	When adding visual separators at interval points. Covers:
84	- ShowDividers property
85	- Divider radius and colors
86	- Divider stroke and thickness
87	- DividerStyle configuration
88	- Visual states for disabled dividers
89
90	### Intervals and Selection
91	📄 Read: [references/intervals-and-selection.md](references/intervals-and-selection.md)
92	When configuring interval behavior and selection modes. Covers:
93	- Interval property for spacing
94	- StepSize for discrete selection
95	- EnableIntervalSelection
96	- DragBehavior (OnThumb, BetweenThumbs, Both)
97	- EnableDeferredUpdate for performance
98	- DeferredUpdateDelay configuration
99
100	### Tooltips
101	📄 Read: [references/tooltips.md](references/tooltips.md)
102	When displaying value tooltips during interaction. Covers:
103	- Enabling tooltips (SliderTooltip)
104	- ShowAlways property
105	- Tooltip styling

People who liked this also viewed

6 picks

Type