CommunityToolkit / CommunityToolkit/Maui

[Proposal] RangeSlider

Open
#115 3 comments 7 reactions 1 assignee Claimed by @jsuarezruiz View on GitHub
approved champion help wanted pending documentation proposal
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.