CommunityToolkit / CommunityToolkit/Maui
[Proposal] RangeSlider
- Dominant language
- C#
- Stars
- 2.7k
- Forks
- 500
- Avg merge
- 2d 14h
- Merged PRs (30d)
- 7
Description
# RangeSlider
* [x] Proposed
* [ ] Prototype: Not Started
* [ ] Implementation: Not Started
* [ ] iOS Support
* [ ] Android Support
* [ ] macOS Support
* [ ] Windows Support
* [ ] Unit Tests: Not Started
* [ ] Sample: Not Started
* [ ] Documentation: Not Started
## Summary
[summary]: #summary
The RangeSlider control enables the user to select a range of values through a slider bar interface. As opposed to a regular Slider that lets you select a single value by sliding the thumb, this control has two thumbs that allows the user to specify a range.
## Detailed Design
[design]: #detailed-design
### RangeSlider.shared.cs
```cs
public class RangeSlider : BaseTemplatedView
{
public static BindableProperty MinimumValueProperty;
public static BindableProperty MaximumValueProperty;
public static BindableProperty StepValueProperty;
public static BindableProperty LowerValueProperty;
public static BindableProperty UpperValueProperty;
public static BindableProperty ThumbSizeProperty;
public static BindableProperty LowerThumbSizeProperty;
public static BindableProperty UpperThumbSizeProperty;
public static BindableProperty TrackSizeProperty;
public static BindableProperty ThumbColorProperty;
public static BindableProperty LowerThumbColorProperty;
public static BindableProperty UpperThumbColorProperty;
public static BindableProperty TrackColorProperty;
public static BindableProperty TrackHighlightColorProperty;
public static BindableProperty ThumbBorderColorProperty;
public static BindableProperty LowerThumbBorderColorProperty;
public static BindableProperty UpperThumbBorderColorProperty;
public static BindableProperty TrackBorderColorProperty;
public static BindableProperty TrackHighlightBorderColorProperty;
public static BindableProperty ValueLabelStyleProperty;
public static BindableProperty LowerValueLabelStyleProperty;
public static BindableProperty UpperValueLabelStyleProperty;
public static BindableProperty ValueLabelStringFormatProperty;
public static BindableProperty LowerThumbViewProperty;
public static BindableProperty UpperThumbViewProperty;
public static BindableProperty ValueLabelSpacingProperty;
public static BindableProperty ThumbRadiusProperty;
public static BindableProperty LowerThumbRadiusProperty;
public static BindableProperty UpperThumbRadiusProperty;
public static BindableProperty TrackRadiusProperty;
public event EventHandler? ValueChanged;
public event EventHandler? LowerValueChanged;
public event EventHandler? UpperValueChanged;
public event EventHandler? DragStarted;
public event EventHandler? LowerDragStarted;
public event EventHandler? UpperDragStarted;
public event EventHandler? DragCompleted;
public event EventHandler? LowerDragCompleted;
public event EventHandler? UpperDragCompleted;
public double MinimumValue { get; set; }
public double MaximumValue { get; set; }
public double StepValue { get; set; }
public double LowerValue { get; set; }
public double UpperValue { get; set; }
public double ThumbSize { get; set; }
public double LowerThumbSize { get; set; }
public double UpperThumbSize { get; set; }
public double TrackSize { get; set; }
public Color ThumbColor { get; set; }
public Color LowerThumbColor { get; set; }
public Color UpperThumbColor { get; set; }
public Color TrackColor { get; set; }
public Color TrackHighlightColor { get; set; }
public Color ThumbBorderColor { get; set; }
public Color LowerThumbBorderColor { get; set; }
public Color UpperThumbBorderColor { get; set; }
public Color TrackBorderColor { get; set; }
public Color TrackHighlightBorderColor { get; set; }
public Style ValueLabelStyle { get; set; }
public Style LowerValueLabelStyle { get; set; }
public Style UpperValueLabelStyle { get; set; }
public string ValueLabelStringFormat { get; set; }
public View? LowerThumbView { get; set; }
public View? UpperThumbView { get; set; }
public double ValueLabelSpacing { get; set; }
public double ThumbRadius { get; set; }
public double LowerThumbRadius { get; set; }
public double UpperThumbRadius { get; set; }
public double TrackRadius { get; set; }
}
```
## Usage Syntax
[usage]: #usage-syntax
### XAML Usage
```xml
```
### C# Usage
```cs
new RangeSlider
{
MaximumValue = 10,
MinimumValue = -10,
StepValue = 1,
LowerValue = -10,
UpperValue = 10
};
```
Contributor guide
Assessment
This issue has not been assessed yet.