[Proposal] RangeSlider

[TheCodeTraveler]

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

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

RangeSlider.shared.cs

public class RangeSlider : BaseTemplatedView<AbsoluteLayout>
{
  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

XAML Usage

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="MyLittleApp.MainPage">

     <StackLayout>

        <xct:RangeSlider
                x:Name="RangeSlider"
                MaximumValue="10"
                MinimumValue="-10"
                StepValue="1"
                LowerValue="-10"
                UpperValue="10" />

    </StackLayout>

</ContentPage>

C# Usage

new RangeSlider
{
  MaximumValue = 10,
  MinimumValue = -10,
  StepValue = 1,
  LowerValue = -10,
  UpperValue = 10
};