How to hide the .NET MAUI Slider (SfSlider) thumb?
.NET MAUI Slider Thumbs and its Overlay
By using Syncfusion .NET MAUI Slider control, you can easily remove the thumb and overlay from the slider by following these steps:
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 Sliders control 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 4: Now, initialize the SfSlider as shown in the following code, and remove the thumb and overlay from the slider by setting the value of the ThumbStyle class's Radius property to 0 and the ThumbOverlayStyle class's Radius property to 0.
Using Xaml
<sliders:SfSlider > <sliders:SfSlider.ThumbStyle> <sliders:SliderThumbStyle Radius="0"/> </sliders:SfSlider.ThumbStyle> <sliders:SfSlider.ThumbOverlayStyle> <sliders:SliderThumbOverlayStyle Radius="0"/> </sliders:SfSlider.ThumbOverlayStyle> </sliders:SfSlider>
Using C#
SfSlider slider = new SfSlider(); slider.ThumbStyle.Radius = 0; slider.ThumbOverlayStyle.Radius = 0;
Output
Check the following links for more features in Syncfusion MAUI Sliders:
