Regions in Range Selector (SfRangeSelector)

30 Sep 20226 minutes to read

This section explains how to customize the active and inactive regions in the Range Selector control.

Region color

Change the color of the active and inactive regions using the ActiveRegionFill and InactiveRegionFill properties of the RangeSelectorBase class. The default value of the ActiveRegionFill and the InactiveRegionFill properties are SolidColorBrush(Colors.Transparent) and SolidColorBrush(Color.FromRgba(255, 255, 255, 192) respectively.

The active side of the Range Selector is between the start and the end thumbs.

The inactive side of the Range Selector is between the Minimum value and the left thumb and the right thumb and the Maximum value.

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 ActiveRegionFill="#40FFFF00"
                             InactiveRegionFill="#33FF8A00">

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

    </sliders:SfRangeSelector>
</ContentPage>

C#

SfRangeSelector rangeSelector = new SfRangeSelector(); 
rangeSelector.ActiveRegionFill = new SolidColorBrush(Color.FromArgb("#40FFFF00"));    
rangeSelector.InactiveRegionFill = new SolidColorBrush(Color.FromArgb("#33FF8A00")); 
SfCartesianChart chart = new SfCartesianChart();
rangeSelector.Content = chart;

Region stroke

Change the stroke color of the active and inactive regions using the ActiveRegionStroke and InactiveRegionStroke properties of the RangeSelectorBase class. The default value of the ActiveRegionStroke and the InactiveRegionStroke properties are SolidColorBrush(Colors.Transparent) and SolidColorBrush(Colors.Transparent) respectively.

The active side of the Range Selector is between the start and the end thumbs.

The inactive side of the Range Selector is between the Minimum value and the left thumb and the right thumb and the Maximum value.

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 ActiveRegionFill="#40FFFF00"
                             InactiveRegionFill="#33FF8A00"
                             ActiveRegionStroke="#FFFF00"
                             InactiveRegionStroke="#B8860B">

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

    </sliders:SfRangeSelector>
</ContentPage>

C#

SfRangeSelector rangeSelector = new SfRangeSelector(); 
rangeSelector.ActiveRegionFill = new SolidColorBrush(Color.FromArgb("#40FFFF00"));    
rangeSelector.InactiveRegionFill = new SolidColorBrush(Color.FromArgb("#33FF8A00")); 
rangeSelector.ActiveRegionStroke = new SolidColorBrush(Color.FromArgb("#FFFF00")); 
rangeSelector.InactiveRegionStroke = new SolidColorBrush(Color.FromArgb("#B8860B"));       
SfCartesianChart chart = new SfCartesianChart();
rangeSelector.Content = chart;

Region stroke thickness

Change the stroke thickness of the active and inactive regions using the ActiveRegionStrokeThickness and InactiveRegionStrokeThickness properties of the RangeSelectorBase class. The default value of the ActiveRegionStrokeThickness and the InactiveRegionStrokeThickness properties is Thickness(1).

The active side of the Range Selector is between the start and the end thumbs.

The inactive side of the Range Selector is between the Minimum value and the left thumb and the right thumb and the Maximum value.

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 ActiveRegionFill="#40FFFF00"
                             InactiveRegionFill="#33FF8A00"
                             ActiveRegionStroke="#A52A2A"
                             InactiveRegionStroke="#A52A2A"
                             ActiveRegionStrokeThickness="3,0,3,0"
                             InactiveRegionStrokeThickness="0,3,0,3">

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

    </sliders:SfRangeSelector>
</ContentPage>

C#

SfRangeSelector rangeSelector = new SfRangeSelector();
rangeSelector.ActiveRegionFill = new SolidColorBrush(Color.FromArgb("#40FFFF00"));    
rangeSelector.InactiveRegionFill = new SolidColorBrush(Color.FromArgb("#33FF8A00")); 
rangeSelector.ActiveRegionStroke = new SolidColorBrush(Color.FromArgb("#A52A2A")); 
rangeSelector.InactiveRegionStroke = new SolidColorBrush(Color.FromArgb("#A52A2A"));       
rangeSelector.ActiveRegionStrokeThickness = new Thickness(3,0,3,0);
rangeSelector.InactiveRegionStrokeThickness = new Thickness(0,3,0,3);
SfCartesianChart chart = new SfCartesianChart();
rangeSelector.Content = chart;