How to customize the .NET MAUI Slider (SfSlider) label text?
By using Syncfusion .NET MAUI Slider control, you can customize the sliders’ label text. In this article, we have updated the label style of sliders based on sliders’ active and inactive portions.
Step 1: Create a .NET MAUI application project in Visual Studio.
Step 2: Add the Syncfusion.Maui.Sliders NuGet to the project from nuget.org.
- Open the NuGet package manager in Visual Studio.
- Search for Syncfusion.Maui.Sliders and install it.
Step 3: In the MauiProgram.cs file, register the Syncfusion.Maui.Core handler as shown below.
The Syncfusion.Maui.Core package is dependent on Syncfusion.Maui.Sliders NuGet package, and it will be installed automatically when you install the Syncfusion.Maui.Sliders package in step 2.
Using C#
using Syncfusion.Maui.Core.Hosting;
namespace SliderDemo
{
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.ConfigureSyncfusionCore(); // Handler for Syncfusion Core project
return builder.Build();
}
}
}
Step 4: Add the .NET MAUI Slider controls’ namespace to the MainPage.xaml.
Using XAML
xmlns:sliders="clr-namespace:Syncfusion.Maui.Sliders;assembly=Syncfusion.Maui.Sliders"
Using C#
using Syncfusion.Maui.Sliders;
Step 5: Now, initialize the SfSlider control and show the labels by setting the value for the SfSlider.ShowLabels property as true. By default, the slider will show the first and last labels only. You can also set the SfSlider.Interval property to display the labels more clearly.
Using XAML
<ContentPage.Content> <sliders:SfSlider ShowLabels="true" Interval="0.2" /> </ContentPage.Content>
Using C#
SfSlider slider = new SfSlider(); slider.ShowLabels = true; slider.Interval = 0.2;
Step 6: Use the SfSlider.LabelStyle property to set the styles like font size, font family, font attributes, text color, etc.
Using XAML
<sliders:SfSlider.LabelStyle> <sliders:SliderLabelStyle ActiveTextColor="#EE3F3F" InactiveTextColor="#F7B1AE" ActiveFontAttributes="Bold" InactiveFontAttributes="Italic" ActiveFontSize="16" InactiveFontSize="14" /> </sliders:SfSlider.LabelStyle>
Using C#
slider.LabelStyle = new SliderLabelStyle()
{
ActiveTextColor = Color.FromArgb("#EE3F3F"),
InactiveTextColor = Color.FromArgb("#F7B1AE"),
ActiveFontAttributes = FontAttributes.Bold,
InactiveFontAttributes = FontAttributes.Italic,
ActiveFontSize = 16,
InactiveFontSize = 14,
};
this.Content = slider;
Output
In the above output, you can see that the labels at the slider track's active portion (0 to 0.5) are different from the labels at the inactive portion (0.5 to 1).
Check the following links to know more about Syncfusion MAUI Sliders:
Conclusion
Hope you enjoyed learning about how to customize the .NET MAUI Slider (SfSlider) label text.
You can refer to our .NET MAUI Slider feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI Slider documentation to understand how to present and manipulate data.
For current customers, you can check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our .NET MAUI Calendar and other .NET MAUI components.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
