Basic features in .NET MAUI Range Selector (SfRangeSelector)

5 Jul 20222 minutes to read

This section explains how to add the numeric Range Selector.

Minimum

The minimum value that the user can select. The default value of the Minimum property is 0 and it must be less than the Maximum value.

Maximum

The maximum value that the user can select. The default value of the Maximum property is 1 and it must be greater than the Minimum value.

Range values

It represents the values currently selected in the Range Selector. The Range Selector’s thumb is drawn corresponding to this RangeStart and RangeEnd values.

XAML

<ContentPage 
             ...
             xmlns:sliders="clr-namespace:Syncfusion.Maui.Sliders;assembly=Syncfusion.Maui.Sliders"
             xmlns:charts="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts">

    <sliders:SfRangeSelector Minimum="10"
                             Maximum="20"
                             RangeStart="13"
                             RangeEnd="17"
                             ShowLabels="True">

        <charts:SfCartesianChart>
            ...
        </charts:SfCartesianChart>

    </sliders:SfRangeSelector>
</ContentPage>

C#

SfRangeSelector rangeSelector = new SfRangeSelector();
rangeSelector.Minimum = 10;
rangeSelector.Maximum = 20;
rangeSelector.RangeStart = 13;
rangeSelector.RangeEnd = 17;
rangeSelector.ShowLabels = true;
SfCartesianChart chart = new SfCartesianChart();
rangeSelector.Content = chart;