---
title: "Introducing the New .NET MAUI Range Selector"
published_at: "2022-04-21T10:00:16+00:00"
modified_at: "2025-03-21T11:33:08+00:00"
url: "https://www.syncfusion.com/blogs/post/introducing-the-new-net-maui-range-selector"
excerpt: "We are pleased to announce that the MAUI Sliders package has been updated in the 2022 Volume 1 release with a Range Selector control along with some new features in the existing Slider and Range Slider controls. The .NET MAUI..."
taxonomy_category:
  - ".NET MAUI"
  - "Desktop"
  - "Mobile"
  - "Syncfusion"
  - "UI"
  - "What's new"
taxonomy_post_tag:
  - ".NET MAUI"
  - "desktop"
  - "Mobile"
  - "range navigator"
  - "What's New"
---

# Introducing the New .NET MAUI Range Selector

[Vijayakumar Mariappan](https://www.syncfusion.com/blogs/author/vijayakumar-mariappan)

![Introducing the New .NET MAUI Range Selector](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Introducing-the-New-.NET-MAUI-Range-Selector.png)


We are pleased to announce that the [MAUI Sliders package](https://www.nuget.org/packages/Syncfusion.Maui.Sliders)
 has been updated in the [2022 Volume 1](https://www.syncfusion.com/forums/174125/essential-studio-2022-volume-1-main-release-v20-1-0-47-is-available-for-download)
 release with a [Range Selector](https://www.syncfusion.com/maui-controls/maui-range-selector)
 control along with some new features in the existing [Slider](https://www.syncfusion.com/maui-controls/maui-slider)
 and [Range Slider](https://www.syncfusion.com/maui-controls/maui-range-slider)
 controls.

The .NET MAUI Range Selector is a highly interactive UI control for selecting a smaller range from a larger data set. It supports adding any type of control as its content. You can use this control for range navigation in your .NET MAUI applications.

In this blog, we will explore the features of the new .NET MAUI Range Selector and the steps to getting started with it.

## Key features

The key elements of the .NET MAUI Range Selector control are:

- [Scales](#scales)
- [Ticks and labels](#ticks-and-labels)
- [Dividers](#dividers)
- [Tooltips](#tooltips)
- [Regions](#regions)

### Scales

Technically, the new .NET MAUI Range Selector is implemented as two different controls: [Numeric Range Selector](https://help.syncfusion.com/maui/range-selector/basic-features#numeric-range-selector)
 to handle numeric values and [DateTime Range Selector](https://help.syncfusion.com/maui/range-selector/basic-features#date-range-selector)
 to handle date-time values. Other than the underlying value-type difference, they share a common set of features and functionalities. The separation in implementation is just for improving performance.

![Numeric Scale in .NET MAUI Range Selector](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Numeric-Scale-in-.NET-MAUI-Range-Selector.png)

![DateTime Scale in .NET MAUI Range Selector](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/DateTime-Scale-in-.NET-MAUI-Range-Selector.png)You can customize the active and inactive scale size and color using the built-in APIs, and for the date-time scale, you can have a range in any unit from years to seconds.

### Ticks and labels

The .NET MAUI Range Selector supports both [major and minor ticks](https://help.syncfusion.com/maui/range-selector/ticks)
. Use major ticks to visualize the intervals and minor ticks as dividers between the intervals. Typically, ticks will be rendered at the bottom of the scale, but you can also move them to the top of the scale by setting a negative value to the [offset](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SliderTickStyle.html#Syncfusion_Maui_Sliders_SliderTickStyle_Offset)
 property.

Also, you can easily customize the active and inactive tick size and color using the built-in APIs.

![Major and Minor Ticks in .NET MAUI Range Selector](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Major-and-Minor-Ticks-in-.NET-MAUI-Range-Selector.png)Show [labels](https://help.syncfusion.com/maui/range-selector/labels)
 at designated intervals, just like major ticks. Change the visual representation of the labels using the [numeric](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.NumericRangeSliderBase.html?tabs=tabid-1#Syncfusion_Maui_Sliders_NumericRangeSliderBase_NumberFormat)
 and [date-time formatting](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.DateTimeRangeSliderBase.html?tabs=tabid-2#Syncfusion_Maui_Sliders_DateTimeRangeSliderBase_DateFormat)
 properties. You can even customize the active and inactive font size, text color, font attributes, and font family using the built-in APIs.

Also, using the built-in events, we can easily customize all the text to represent low, medium, and high values.

![Labels in .NET MAUI Range Selector](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Labels-in-.NET-MAUI-Range-Selector.png)

### Dividers

Render [dividers](https://help.syncfusion.com/maui/range-selector/divider)
 in each interval to show the ranges accurately. You can customize their color and size using the built-in APIs.

![Dividers in .NET MAUI Range Selector](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Dividers-in-.NET-MAUI-Range-Selector.png)

### Tooltips

Use [tooltips](https://help.syncfusion.com/maui/range-selector/tooltip)
 to clearly indicate the selected values. You can make tooltips always visible or only visible when the user interacts with them.

You can also customize the tooltip text and its color, font size, font attributes, and font family using the built-in APIs.

![Tooltips in .NET MAUI Range Selector](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Tooltips-in-.NET-MAUI-Range-Selector.png)

### Regions

Render an overlay on the content to visualize the selected data clearly. You can customize its color and border using the built-in APIs.

## ![Visualizing Data in a Region in .NET MAUI Range Selector](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Regions-in-.NET-MAUI-Range-Selector.png)

## Steps to getting started

Follow these steps to add the .NET MAUI Range Selector to your app and use its basic features.

### Step 1: Create an app with .NET MAUI

First, create [a new .NET MAUI app](https://docs.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-android)
 in [Visual Studio](https://visualstudio.microsoft.com/)
.

![Create a New .NET MAUI Application in Visual Studio](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Create-a-New-.NET-MAUI-Application-in-Visual-Studio.png)

### Step 2: Install the Sliders package

Open the NuGet Package Manager (**Tools**>** NuGet Package Manager**>** Manage NuGet Packages for Solution**). Select the [nuget.org](https://www.nuget.org/)
 package source. In the Browse area, search for [Syncfusion.Maui.Sliders](https://www.nuget.org/packages/Syncfusion.Maui.Sliders)
 and install it.

Refer to the following image.  
 ![Install the Syncfusion.Maui.Sliders NuGet Package](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Install-the-Syncfusion.Maui_.Sliders-NuGet-Package.png)

**Note:** MAUI is still in preview mode, so the [Syncfusion.Maui.Sliders](https://www.nuget.org/packages/Syncfusion.Maui.Sliders)
 package is tagged as preview. We have to select the **Include Prerelease** option to see the prerelease packages.

### Step 3: Register the handler

The [Syncfusion.Maui.Core](https://www.nuget.org/packages/Syncfusion.Maui.Core)
 NuGet package is a dependent package for all our Syncfusion .NET MAUI controls. In the **MauiProgram.cs** file, register the handler for the Syncfusion Core using the **ConfigureSyncfusionCore**() method.

Refer to the following code.

```
using Syncfusion.Maui.Core.Hosting;
 
namespace GettingStarted;
 
public static class MauiProgram
{
 public static MauiApp CreateMauiApp()
 {
  var builder = MauiApp.CreateBuilder();
  builder
    .UseMauiApp<App>()
    .ConfigureSyncfusionCore()
    .ConfigureFonts(fonts =>
    {
      fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
    });
 
  return builder.Build();
 }
}
```

### Step 4: Import the namespace

Import the **Syncfusion.Maui.Sliders** control namespace in your XAML or C# code.

**XAML**

```
xmlns:sliders="clr-namespace:Syncfusion.Maui.Sliders;assembly=Syncfusion.Maui.Sliders"
```

**C#**

```
using Syncfusion.Maui.Sliders;
```

### Step 5: Initialize the Range Selector

The following code examples show how to initialize the numeric and date-time Range Selectors, respectively.

#### Numeric Range Selector

**XAML**

```
<ContentPage ...
xmlns:sliders="clr-namespace:Syncfusion.Maui.Sliders;assembly=Syncfusion.Maui.Sliders"
...>
   <sliders:SfRangeSelector />
</ContentPage>
```

**C#**

```
using Syncfusion.Maui.Sliders;
 
namespace GettingStarted;
 
public partial class MainPage : ContentPage
{
 public MainPage()
 {
   InitializeComponent();
   SfRangeSelector selector = new SfRangeSelector();
   Content = selector;
 }
}
```

#### DateTime Range Selector

We have to set the [Minimum](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.DateTimeRangeSliderBase.html#Syncfusion_Maui_Sliders_DateTimeRangeSliderBase_Minimum)
, [Maximum](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.DateTimeRangeSliderBase.html#Syncfusion_Maui_Sliders_DateTimeRangeSliderBase_Maximum)
, [RangeStart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.DateTimeRangeSliderBase.html#Syncfusion_Maui_Sliders_DateTimeRangeSliderBase_RangeStart)
, and [RangeEnd](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.DateTimeRangeSliderBase.html#Syncfusion_Maui_Sliders_DateTimeRangeSliderBase_RangeEnd)
 properties like in the following code to use a DateTime Range Selector.

**XAML**

```
<ContentPage ...
xmlns:sliders="clr-namespace:Syncfusion.Maui.Sliders;assembly=Syncfusion.Maui.Sliders"
...>
   <sliders:SfDateTimeRangeSelector Minimum="1990-01-01"
                                    Maximum="1991-01-01"
                                    RangeStart="1990-03-01"
                                    RangeEnd="1990-09-01" />
</ContentPage>
```

**C#**

```
using Syncfusion.Maui.Sliders;
 
namespace GettingStarted;
 
public partial class MainPage : ContentPage
{
 public MainPage()
 {
  InitializeComponent();
 
  SfDateTimeRangeSelector selector = new SfDateTimeRangeSelector()
  {
     Minimum = new DateTime(1990, 01, 01),
     Maximum = new DateTime(1991, 01, 01),
     RangeStart = new DateTime(1990, 03, 01),
     RangeEnd = new DateTime(1990, 09, 01),
  };
 
  Content = selector;
 }
}
```

### Step 6: Adding content to Range Selector

Here I’m going to add our [.NET MAUI Charts](https://www.syncfusion.com/maui-controls/maui-charts)
 component as content to the DateTime Range Selector. To do so, follow the same procedure described above for installing the Sliders package ([Step 2](#step2)
) and install the [Syncfusion.Maui.Charts](https://www.nuget.org/packages/Syncfusion.Maui.Charts)
 package.

#### Initialize the view model for the chart

Now, let’s create a simple data source for the chart.

**C#**

```
public class Data
{
  public Data(DateTime x, double y)
  {
    X = x;
    Y = y;
  }
 
  public DateTime X { get; set; }
 
  public double Y { get; set; }
}
 
public class ChartViewModel
{
  public ChartViewModel()
  {
    Source = new ObservableCollection<Data>
    {
      new Data(new DateTime(1990, 01, 01), 415),
      new Data(new DateTime(1990, 01, 16), 408),
      new Data(new DateTime(1990, 02, 01), 415),
      new Data(new DateTime(1990, 02, 16), 350),
      new Data(new DateTime(1990, 03, 01), 375),
      new Data(new DateTime(1990, 03, 16), 500),
      new Data(new DateTime(1990, 04, 01), 390),
      new Data(new DateTime(1990, 04, 16), 400),
      new Data(new DateTime(1990, 05, 01), 440),
      new Data(new DateTime(1990, 05, 16), 350),
      new Data(new DateTime(1990, 06, 01), 400),
      new Data(new DateTime(1990, 06, 16), 365),
      new Data(new DateTime(1990, 07, 01), 490),
      new Data(new DateTime(1990, 07, 16), 400),
      new Data(new DateTime(1990, 08, 01), 520),
      new Data(new DateTime(1990, 08, 16), 510),
      new Data(new DateTime(1990, 09, 01), 395),
      new Data(new DateTime(1990, 09, 16), 380),
      new Data(new DateTime(1990, 10, 01), 404),
      new Data(new DateTime(1990, 10, 16), 430),
      new Data(new DateTime(1990, 11, 01), 375),
      new Data(new DateTime(1990, 11, 16), 350),
      new Data(new DateTime(1990, 12, 01), 398),
      new Data(new DateTime(1990, 12, 16), 432),
   };
 }
 
 public ObservableCollection<Data> Source { get; set; }
}
```

Set the **ChartViewModel** instance as the ** BindingContext** of your page to bind the ** ChartViewModel** properties to the chart. Then, populate the chart by setting the above data as an ** ItemsSource** for the ** AreaSeries** and specifying the ** XBindingPath** and ** YBindingPath** as ** X** and ** Y**, respectively (X and Y are the model property names).

Now, set the interval as 1 month and enable the ticks, labels, and tooltip features to visualize the selected range clearly.

**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:GettingStarted"
 ...>
 
 <ContentPage.BindingContext>
   <local:ChartViewModel />
 </ContentPage.BindingContext>
 
 <sliders:SfDateTimeRangeSelector Minimum="1990-01-01"
                                 Maximum="1991-01-01"
                                 RangeStart="1990-03-01"
                                 RangeEnd="1990-09-01"
                                 Interval="1"
                                 IntervalType="Months"
                                 ShowTicks="True"
                                 ShowLabels="True"
                                 DateFormat="MMM">
 
  <sliders:SfDateTimeRangeSelector.Tooltip>
    <sliders:SliderTooltip ShowAlways="True"
                         DateFormat="dd MMM" />
  </sliders:SfDateTimeRangeSelector.Tooltip>
 
  <charts:SfCartesianChart>
   <charts:SfCartesianChart.XAxes>
     <charts:DateTimeAxis IsVisible="False"
                          ShowMajorGridLines="False" />
   </charts:SfCartesianChart.XAxes>
 
   <charts:SfCartesianChart.YAxes>
     <charts:NumericalAxis IsVisible="False"
                           ShowMajorGridLines="False"
                           Minimum=”250” />
   </charts:SfCartesianChart.YAxes>
 
   <charts:AreaSeries ItemsSource="{Binding Source}"
                      XBindingPath="X"
                      YBindingPath="Y" />
  </charts:SfCartesianChart>
 </sliders:SfDateTimeRangeSelector>
 
</ContentPage>
```

**C#**

```
using Syncfusion.Maui.Charts;
using Syncfusion.Maui.Sliders;
 
namespace GettingStarted;
 
public partial class ZoomingPage : ContentPage
{
 public ZoomingPage()
 {
   InitializeComponent();
 
   ChartViewModel viewModel = new ChartViewModel();
 
   SfDateTimeRangeSelector selector = new SfDateTimeRangeSelector()
   {
       Minimum = new DateTime(1990, 01, 01),
       Maximum = new DateTime(1991, 01, 01),
       RangeStart = new DateTime(1990, 03, 01),
       RangeEnd = new DateTime(1990, 09, 01),
       Interval = 1,
       IntervalType = SliderDateIntervalType.Months,
       ShowTicks = true,
       ShowLabels = true,
       DateFormat = "MMM",
       Tooltip = new SliderTooltip() { ShowAlways = true, DateFormat = "dd MMM" },
   };
 
   SfCartesianChart chart = new SfCartesianChart();
   chart.XAxes.Add(new DateTimeAxis()
   {
     IsVisible = false,
     ShowMajorGridLines = false
   });
   chart.YAxes.Add(new NumericalAxis()
   {
     IsVisible = false,
     ShowMajorGridLines = false,
     Minimum = 250,
   });
 
   AreaSeries series = new AreaSeries()
   {
     ItemsSource = viewModel,
     XBindingPath = "X",
     YBindingPath = "Y"
    };
 
   chart.Series.Add(series);
 
   Content = selector;
 }
}
```

![Adding .NET MAUI Charts as Content to Range Selector](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Adding-.NET-MAUI-Charts-as-Content-to-Range-Selector.png)

### Step 7: Visualize the selected data in the Range Selector using a chart

Now, I am going to add a [LineSeries](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.LineSeries.html)
 chart on top of the Range Selector to visualize the selected range in a more detailed manner. I bind the DateTime Range Selector’s [RangeStart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.DateTimeRangeSliderBase.html#Syncfusion_Maui_Sliders_DateTimeRangeSliderBase_RangeStart)
 to [Minimum](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.DateTimeAxis.html#Syncfusion_Maui_Charts_DateTimeAxis_Minimum)
 and its [RangeEnd](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.DateTimeRangeSliderBase.html#Syncfusion_Maui_Sliders_DateTimeRangeSliderBase_RangeEnd)
 to [Maximum](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.DateTimeAxis.html#Syncfusion_Maui_Charts_DateTimeAxis_Maximum)
 of the chart’s [DateTimeAxis](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.DateTimeAxis.html)
. Doing this will update the line chart based on the data we selected in the Range Selector.

Refer to the following code example.

```
<VerticalStackLayout>
 <charts:SfCartesianChart>
  <charts:SfCartesianChart.XAxes>
   <charts:DateTimeAxis Minimum="{Binding RangeStart, Source={x:Reference Selector}}"
                        Maximum="{Binding RangeEnd, Source={x:Reference Selector}}" />
  </charts:SfCartesianChart.XAxes>
 
  <charts:SfCartesianChart.YAxes>
    <charts:NumericalAxis />
  </charts:SfCartesianChart.YAxes>
 
  <charts:LineSeries ItemsSource="{Binding Source}"
                     XBindingPath="X"
                     YBindingPath="Y" />
 </charts:SfCartesianChart>
 
 <sliders:SfDateTimeRangeSelector>
   ...
 </sliders:SfDateTimeRangeSelector>
</VerticalStackLayout>
```

![Visualizing the Selected Data in the Range Selector using a Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Visualizing-the-Selected-Data-in-the-Range-Selector-using-a-Chart.gif)

## References

For more details, refer to the [Getting Started with .NET MAUI Range Selector GitHub demo](https://github.com/SyncfusionExamples/maui-range-selector-samples/tree/main/GettingStarted)
 and [documentation](https://help.syncfusion.com/maui/range-selector/getting-started)
.

## Conclusion

Thanks for reading! In this blog post, we explored the great features of our new [.NET MAUI Range Selector](https://www.syncfusion.com/maui-controls/maui-range-selector)
 available in the [2022 Volume 1](https://www.syncfusion.com/forums/174125/essential-studio-2022-volume-1-main-release-v20-1-0-47-is-available-for-download)
 release. Try this wonderful control and share your feedback in the comments section below.

Also, you can contact us through our [support forum](https://www.syncfusion.com/forums)
, [support portal](https://support.syncfusion.com)
, or [feedback portal](https://www.syncfusion.com/feedback/maui)
. As always, we are happy to assist you!

## Related blogs

- [Syncfusion Essential Studio® 2022 Volume 1 is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2022-volume-1-is-here.aspx)
- [Introducing the New .NET MAUI Linear Gauge Control](https://www.syncfusion.com/blogs/post/introducing-the-new-net-maui-linear-gauge-control.aspx)
- [What’s New in .NET MAUI: 2022 Volume 1](https://www.syncfusion.com/blogs/post/whats-new-in-net-maui-2022-volume-1.aspx)
- [Syncfusion .NET MAUI 2022 Roadmap](https://www.syncfusion.com/blogs/post/syncfusion-net-maui-2022-roadmap.aspx)