.NET MAUI CircularSlider Labels Styling

Updated on Aug 11, 2026

The CircularSlider for .NET MAUI provides the following styling options and a style selector for the labels (to let you apply additional styles):

• TextColor (Color)—Defines a custom color for the labels.
• FontFamily (string)—Defines a custom font family for the labels.
• FontSize (double)—Defines a custom font size for the labels.
• LabelStyle (Style)—Defines a custom style for the labels.
• LabelStyleSelector (Telerik.Maui.Controls.IStyleSelector)—Defines a selector that can apply different styles to different labels according to custom logic.

The following example demonstrates how to use the LabelStyleSelector to apply different styles to the labels based on the Value and OriginValue properties:

1. Add the style selector to the page's resources:

XAML

<local:RangeLabelStyleSelector x:Key="RangeLabelStyleSelector">
    <local:RangeLabelStyleSelector.InsideRangeStyle>
        <Style TargetType="Label">
            <Setter Property="TextColor" Value="#018383" />
            <Setter Property="FontFamily" Value="Arial" />
            <Setter Property="FontSize" Value="16" />
        </Style>
    </local:RangeLabelStyleSelector.InsideRangeStyle>
    <local:RangeLabelStyleSelector.OutsideRangeStyle>
        <Style TargetType="Label">
            <Setter Property="TextColor" Value="#830183" />
            <Setter Property="FontFamily" Value="Arial" />
            <Setter Property="FontSize" Value="16" />
        </Style>
    </local:RangeLabelStyleSelector.OutsideRangeStyle>
</local:RangeLabelStyleSelector>

2. Apply the style selector to the CircularSlider:

XAML

<telerik:RadCircularSlider Minimum="0"
                           Maximum="100"
                           Value="35"
                           LabelsPlacement="End"
                           LabelStep="10"
                           LabelStyleSelector="{StaticResource RangeLabelStyleSelector}"
                           HorizontalOptions="Fill"
                           VerticalOptions="Start"
                           MinimumHeightRequest="300" />

This is the result:

For a runnable example demonstrating the CircularSlider label style selector scenario, see the SDKBrowser Demo Application and go to the CircularSlider > Styling category.

See Also

• Labels
• Range Track
• Track Styling
• Ticks Styling