Feature/rangeslider

[stephenquan]

Description of Change

New Feature: Introduced a RangeSlider control in the CommunityToolkit.Maui library.

Linked Issues

• Fixes Issue [Proposal] RangeSlider #115

PR Checklist

• Has a linked Issue, and the Issue has been approved(bug) or Championed (feature/proposal)
• Has tests (if omitted, state reason in description)
• Has samples (if omitted, state reason in description)
• Rebased on top of main at time of PR
• Changes adhere to coding standard
• Documentation created or updated: https://github.com/MicrosoftDocs/CommunityToolkit/pulls - TBA

Additional information

• New Feature Added: Introduced a RangeSlider control in the CommunityToolkit.Maui library.
  • Implemented RangeSlider using two standard Slider controls to leverage built-in keyboard navigation and accessibility features.
  • Added bindable properties for minimum/maximum values, lower/upper values, step size, track colors, thumb colors, and focus mode.
  • Included layout logic for inner and outer tracks and dynamic updates based on user interaction.
  • Implemented focus behavior that tracks the currently focused thumb and adjusts the layout of the underlying slider for improved usability.
• Defaults and Enums:
  • Added RangeSliderDefaults for default values and styling.
  • Added RangeSliderFocusMode enum for thumb focus handling.
• Sample Integration:
  • Registered RangeSliderPage and RangeSliderViewModel in AppShell.xaml.cs and MauiProgram.cs.
  • Added a new sample page (RangeSliderPage.xaml) demonstrating different configurations:
    • Basic slider
    • Slider with step size
    • Descending range (min > max)
    • Custom styling
  • Added RangeSliderViewModel with observable properties for binding.

[Copilot]

Pull request overview

This PR introduces a new RangeSlider control to the .NET MAUI Community Toolkit, allowing users to select a range of values using two adjustable thumbs. The implementation uses two standard Slider controls to ensure proper keyboard navigation and accessibility support.

Key Changes:

• Added RangeSlider control with dual-thumb functionality for range selection
• Implemented customizable properties for track colors, thumb colors, sizes, and step increments
• Added focus mode handling to improve usability when interacting with either thumb

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
RangeSlider.shared.cs	Core implementation of the RangeSlider control with bindable properties, layout logic, and event handlers
RangeSliderFocusMode.cs	Enum defining focus modes (Default, Lower, Upper) for thumb interaction
RangeSliderDefaults.shared.cs	Default values and styling constants for RangeSlider properties
RangeSliderViewModel.cs	ViewModel with observable properties for sample page demonstrations
RangeSliderPage.xaml.cs	Code-behind for the RangeSlider sample page
RangeSliderPage.xaml	XAML markup demonstrating various RangeSlider configurations
ViewsGalleryViewModel.cs	Registration of RangeSlider sample in the views gallery
MauiProgram.cs	Service registration for RangeSliderPage and RangeSliderViewModel
AppShell.xaml.cs	Navigation routing registration for RangeSliderPage

[Copilot]

Pull request overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated 6 comments.

[pictos]

Hey, thanks for this feature, I leave a couple of comments

[Copilot]

Pull request overview

Copilot reviewed 10 out of 10 changed files in this pull request and generated 5 comments.

[Copilot]

Pull request overview

Copilot reviewed 10 out of 10 changed files in this pull request and generated 2 comments.

[Copilot]

Pull request overview

Copilot reviewed 10 out of 10 changed files in this pull request and generated 8 comments.

[Copilot]

Pull request overview

Copilot reviewed 10 out of 11 changed files in this pull request and generated 3 comments.

[Copilot]

Pull request overview

Copilot reviewed 10 out of 11 changed files in this pull request and generated 2 comments.

[Copilot]

Pull request overview

Copilot reviewed 10 out of 11 changed files in this pull request and generated 5 comments.

[Copilot]

Pull request overview

Copilot reviewed 11 out of 11 changed files in this pull request and generated 2 comments.

[pictos]

@stephenquan , from our CI

Unhandled exception. System.ArgumentException: An item with the same key has already been added. Key: Microsoft.Maui.Controls.BindableProperty
at System.Collections.Generic.Dictionary2.TryInsert(TKey key, TValue value, InsertionBehavior behavior) at Microsoft.Maui.Controls.BindableObject.SetValue(BindableProperty property, Object value) at CommunityToolkit.Maui.Behaviors.ValidationBehavior.set_IsRunning(Boolean value) in /_/src/CommunityToolkit.Maui/Behaviors/Validators/ValidationBehavior.shared.cs:line 136 at CommunityToolkit.Maui.Behaviors.ValidationBehavior.UpdateStateAsync(VisualElement view, ValidationFlags flags, Boolean isForced, Nullable1 parentToken) in //src/CommunityToolkit.Maui/Behaviors/Validators/ValidationBehavior.shared.cs:line 374
at CommunityToolkit.Maui.Behaviors.ValidationBehavior.OnValidationPropertyChanged(BindableObject bindable, Object oldValue, Object newValue) in //src/CommunityToolkit.Maui/Behaviors/Validators/ValidationBehavior.shared.cs:line 313
at System.Threading.Tasks.Task.<>c.b__124_1(Object state)
at System.Threading.QueueUserWorkItemCallback.Execute()
at System.Threading.ThreadPoolWorkQueue.Dispatch()
at System.Threading.PortableThreadPool.WorkerThread.WorkerThreadStart()
at System.Threading.Thread.StartCallback()

[stephenquan]

Thanks @pictos, I had a look at the failing unit test, but I don't understand. I cannot see any connection between this new RangeSlider feature and the ValidationBehavior errors.

[Copilot]

Pull request overview

Copilot reviewed 11 out of 11 changed files in this pull request and generated 2 comments.

[Copilot]

Pull request overview

Copilot reviewed 11 out of 11 changed files in this pull request and generated 2 comments.