New to Telerik UI for .NET MAUI? Start a free 30-day trial
.NET MAUI Track Styling
The Slider for .NET MAUI provides the following styling options for the backtrack (the track the thumb slides along):
BackTrackThickness
(double
)—Specifies the thickness of the Slider's backtrack.BackTrackColor
(Color
)—Defines the color of the Slider's backtrack.BackTrackStyle
(Style
)—Defines a custom style for the Slider's backtrack.
The Slider for .NET MAUI provides the following styling options for the range track (the track between OriginValue
and Value
):
RangeTrackFill
(Color
)—Defines the fill color for the Slider's range track.RangeTrackStyle
(Style
)—Defines a custom style for the Slider's range track.
The following example demonstrates how to use the described styling properties to style the Slider's backtrack and range track:
1. Add a custom style with TargetType
set to RadBorder
to the page's resources:
xaml
<Style x:Key="CustomBackTrackStyle" TargetType="telerik:RadBorder">
<Setter Property="BorderColor" Value="#B2DFDB" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="4" />
<Setter Property="HeightRequest" Value="8" />
</Style>
2. Add a custom style with TargetType
set to SliderRangeTrack
to the page's resources:
xaml
<Style x:Key="CustomRangeTrackStyle" TargetType="telerik:SliderRangeTrack">
<Setter Property="Stroke" Value="#00897B" />
<Setter Property="StrokeThickness" Value="1" />
<Setter Property="TrackThickness" Value="8" />
</Style>
3. Apply the custom styles to the Slider:
xaml
<telerik:RadSlider Minimum="0"
Maximum="100"
Value="35"
BackTrackColor="#80CBC4"
BackTrackStyle="{StaticResource CustomBackTrackStyle}"
RangeTrackFill="#009688"
RangeTrackStyle="{StaticResource CustomRangeTrackStyle}" />
Check the result below: