New to Telerik UI for .NET MAUI? Start a free 30-day trial

.NET MAUI CircularSlider Thumb Styling

Updated on Aug 11, 2026

The CircularSlider for .NET MAUI provides the following styling options for the value thumb:

ThumbFill (Color)—Defines the fill color of the CircularSlider's thumb.
ThumbStyle (Style with target type Telerik.Maui.Controls.RangeSlider.SliderThumb)—Defines a custom style for the CircularSlider's thumb.

In addition, you can modify the look and feel of the range track, so it matches the style of the thumb. Range track refers to that part of the backtrack from the CircularSlider's OriginValue along to the position of the value thumb.

RangeTrackFill (Color)—Defines the fill color of the CircularSlider's range track.
RangeTrackStyle (Style)—Defines a custom style for the CircularSlider's range track.

The following example demonstrates how to use the described styling properties to style the CircularSlider's thumb and range track:

Add the styles to the page resources:

XAML

<Style x:Key="CustomRangeTrackStyle" TargetType="telerik:SliderRangeTrack">
    <Setter Property="TrackThickness" Value="10" />
    <Setter Property="Fill" Value="#80CBC4" />
    <Setter Property="Stroke" Value="#B2DFDB" />
    <Setter Property="StrokeThickness" Value="1" />
</Style>
<Style x:Key="CustomThumbStyle" TargetType="telerik:SliderThumb">
    <Setter Property="Fill" Value="#009688" />
    <Setter Property="Stroke" Value="#00897B" />
    <Setter Property="StrokeThickness" Value="2" />
</Style>

Apply them to the CircularSlider:

XAML

<telerik:RadCircularSlider Minimum="0"
                           Maximum="100"
                           Value="35"
                           RangeTrackStyle="{StaticResource CustomRangeTrackStyle}"
                           ThumbStyle="{StaticResource CustomThumbStyle}"
                           HorizontalOptions="Fill"
                           VerticalOptions="Start"
                           MinimumHeightRequest="300" />

This is the result:

For a runnable example demonstrating the CircularSlider thumb styling, see the SDKBrowser Demo Application and go to the CircularSlider > Styling category.

.NET MAUI CircularSlider Thumb Styling

See Also