.NET MAUI Slider Labels

The Slider for .NET MAUI can show labels along the backtrack. This helps users to better understand the underlying range of values.

Labels Step and Placement

To display labels, define the LabelStep and LabelPlacement properties of the Slider.

• LabelStep(double)—Defines the values on the backtrack that will be indicated by labels. Each label will be placed at the specified value interval. For example, if LabelStep="5", your labels will show the 0, 5, 10, 15, and 20 values on a 0-20 backtrack.
• LabelsPlacement(Telerik.Maui.Controls.RangeSlider.SliderLabelsPlacement)—Defines where the labels are displayed relative to the position of the backtrack. The available options are:
  • None—No labels are displayed.
  • Start—The labels appear above the backtrack.
  • End—The labels appear below the backtrack.

Check an example on how you can configure labels:

<telerik:RadSlider x:Name="slider"
                   Minimum="0"
                   Maximum="100"
                   Value="35"
                   TicksPlacement="End"
                   TickStep="5"
                   LabelsPlacement="End"
                   LabelStep="10" />

Labels Formatting

You can use the formatting properties to modify the text of the labels.

• StringFormat(string)—Defines a custom string format for the labels of the Slider.
• StringConverter(Telerik.Maui.IStringConverter)—Defines a custom string converter. You can use the string converter to replace the range values with more user-friendly names in your Slider labels.
  

Here is a quick example with a custom string converter:

1. Add the following sample Dictionary String Converter to your resources. It replaces the values of the range with meaningful names to make the range more readable:

<telerik:DictionaryStringConverter x:Key="LowMidHighConverter">
    <telerik:DictionaryStringConverterItem Key="{x:Double 1}" Value="Low" />
    <telerik:DictionaryStringConverterItem Key="{x:Double 2}" Value="Mid-Low" />
    <telerik:DictionaryStringConverterItem Key="{x:Double 3}" Value="Mid" />
    <telerik:DictionaryStringConverterItem Key="{x:Double 4}" Value="Mid-High" />
    <telerik:DictionaryStringConverterItem Key="{x:Double 5}" Value="High" />
</telerik:DictionaryStringConverter>

2. Apply the converter to the Slider:

    <telerik:RadSlider Minimum="1"
                       Maximum="5"
                       TickStep="1"
                       LabelStep="2"
                       Value="35"
                       SnapMode="SnapToTicks"
                       TicksPlacement="Start"
                       LabelsPlacement="Start"
                       StringConverter="{StaticResource LowMidHighConverter}" />
</VerticalStackLayout>

Check the result below:

Label Template

You can use the LabelTemplate property to customize how the Slider labels render.

• LabelTemplate(DataTemplate)—Defines the template of the Slider labels.

Check below a sample LabelTemplate example:

1. Add the custom DataTemplate to your page resources:

<DataTemplate x:Key="CustomLabelTemplate">
    <Label Text="{Binding}"
           FontSize="16"
           TextColor="#674BB2" />
</DataTemplate>

2. Apply it to the Slider's LabelTemplate:

<telerik:RadSlider x:Name="slider"
                   Minimum="0"
                   Maximum="100"
                   Value="35"
                   TicksPlacement="End"
                   TickStep="5"
                   LabelsPlacement="End"
                   LabelStep="10"
                   LabelTemplate="{StaticResource CustomLabelTemplate}" />

Check the result below:

See Also

• Ticks
• Tooltips
• Labels Styling