maui-range-selector-samples

.NET MAUI Range Selector Overview

The Syncfusion .NET MAUI Range Selector (SfRangeSelector) is a highly interactive UI control, allowing users to select a range values within a minimum and maximum limit. It provides rich features, such as track, labels, ticks, dividers, and tooltip.

Key features

• Numeric support - Provided functionality for selecting numeric values.
• Content - Add a control of any type inside the range selector. It is also possible to add Charts controls.
• Labels - Render labels with option to customize their formats based on your requirements.
• Ticks and dividers - Provided an option to show ticks and dividers based on the slider interval. Also, minor ticks can be enabled to indicate the values between each * * interval. These options present the selected value in a more intuitive way for end users.
• Discrete mode - Able to move the thumb in a discrete manner based on the provided step value.
• Tooltip - Render a tooltip to show the selected value clearly. You can also customize the format of the text shown in the tooltip.

The Content property will add the content to the Range Selector. Add any control within the Range Selector with this property. In most cases, the Charts will be added as a content.

XAML

<ContentPage 
             ...
             xmlns:sliders="clr-namespace:Syncfusion.Maui.Sliders;assembly=Syncfusion.Maui.Sliders"
             xmlns:charts="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts"
             xmlns:local="clr-namespace:SliderTestbedSample.RangeSelector">
    
    <ContentPage.BindingContext>
        <local:ViewModel />
    </ContentPage.BindingContext>

    <sliders:SfRangeSelector Minimum="10"
                             Maximum="20"
                             RangeStart="13"
                             RangeEnd="17">
        <charts:SfCartesianChart>

            <charts:SfCartesianChart.XAxes>
                <charts:DateTimeAxis IsVisible="False"
                                    ShowMajorGridLines="False" />
            </charts:SfCartesianChart.XAxes>

            <charts:SfCartesianChart.YAxes>
                <charts:NumericalAxis IsVisible="False"
                                     ShowMajorGridLines="False" />
            </charts:SfCartesianChart.YAxes>

            <charts:SfCartesianChart.Series>
                <charts:SplineAreaSeries ItemsSource="{Binding Source}"
                                        XBindingPath="X"
                                        YBindingPath="Y">
                </charts:SplineAreaSeries>

            </charts:SfCartesianChart.Series>
        
        </charts:SfCartesianChart>
    
    </sliders:SfRangeSelector>
</ContentPage>

C#

SfRangeSelector rangeSelector = new SfRangeSelector();
rangeSelector.Minimum = 10;
rangeSelector.Maximum = 20;
rangeSelector.RangeStart = 13;
rangeSelector.RangeEnd = 17;
SfCartesianChart chart = new SfCartesianChart();
DateTimeAxis primaryAxis = new DateTimeAxis();
chart.XAxes = primaryAxis;
NumericalAxis secondaryAxis = new NumericalAxis();
chart.YAxes = secondaryAxis;
SplineAreaSeries series = new SplineAreaSeries();
series.ItemsSource = (new ViewModel()).Source;
series.XBindingPath = "X";
series.YBindingPath = "Y";
rangeSelector.Content = chart;

Enable labels

The ShowLabels property enables the labels which renders on given interval.

Enable ticks

The ShowTicks property enables the ticks in the Range Selector, while the MinorTicksPerInterval property enables the minor ticks between the major ticks.

Inverse the Range Selector

Invert the Range Selector using the IsInversed property. The default value of the IsInversed property is False.

Formatting labels

Add prefix or suffix to the labels using the NumberFormat property.