Track Styling
The RangeSlider for .NET MAUI control exposes thickness and color styling properties for its range track (between the start thumb and end thumb) as well as its backtrack (the track the range thumb slides along), so you can easily achieve the desired look & feel:
-
BackTrackThickness(double)—Specifies the thickness of the range slider's backtrack. -
BackTrackColor(Color)—Defines the color of the range slider's backtrack. -
BackTrackStyle(Style)—Sets a custom style to the range slider's backtrack.
Check the following stype properties related to the range track (part of the range thumb):
-
RangeTrackFill(Color)—Defines fill color to the range track. -
RangeTrackStyle(Style)—Applies a custom style to the range track.
Here is a a quick example on how to apply the range/backtrack properties to the RangeSlider:
1. Add a custom style with TargetType set to RadBorder to the page's resources:
<Style x:Key="CustomTrackStyle" 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:
<Style x:Key="CustomRangeTrackStyle" TargetType="telerik:SliderRangeTrack">
<Setter Property="Stroke" Value="#00897B" />
<Setter Property="StrokeThickness" Value="1" />
<Setter Property="TrackThickness" Value="8" />
</Style>
3. Define the RangeSlider with the styles applied:
<telerik:RadRangeSlider Minimum="0"
Maximum="100"
RangeStart="25"
RangeEnd="75"
BackTrackColor="#80CBC4"
BackTrackStyle="{StaticResource CustomTrackStyle}"
RangeTrackFill="#009688"
RangeTrackStyle="{StaticResource CustomRangeTrackStyle}" />
Check the result below:
