.NET MAUI Range Selector | An Interactive Range Selector

Overview

The .NET MAUI Range Selector is a highly interactive UI control for selecting a smaller range from a larger data set. It provides a rich set of features such as labels, ticks, dividers, step duration, overlays, and tooltips. It also supports adding any type of control as its content.

.NET MAUI Range Selector Code Example

Easily get started with the .NET MAUI Range Selector using a few simple lines of XAML code example as demonstrated below. Also explore our .NET MAUI Range Selector Example that shows you how to render the Range Selector control in .NET MAUI.

xaml
<sliders:SfRangeSelector Minimum="0" 
                    Maximum="20" 
                    RangeStart="6" 
                    RangeEnd="16"
                    ShowTicks="True"
                    ShowLabels="True"
                    ShowDividers="True"
                    Interval="2" 
                    MinorTicksPerInterval="1">
    <chart:SfCartesianChart>
        <charts:SfCartesianChart.XAxes>
            <charts:NumericalAxis 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>

Content

Add your content of choice, including any MAUI control. The Range Selector is smart enough to handle functions like segment selection and chart zooming based on the range specified.

.NET MAUI Range Selector content

Scales

The Range Selector can be used for numeric values, and the Date-Time Range Selector can be used for date-time values. Both the Range Selector and Date-Time Range Selector share common features regardless of the underlying values.

Numeric Range Selector

Numeric Range Selector in .NET MAUI

Date-Time Range Selector

Date-Time Range Selector in .NET MAUI

.NET MAUI Range Selector ticks

Ticks

Set both major and minor ticks in the track. Use major ticks to show the intervals clearly and minor ticks to help users choose values between two intervals easily.