How to Enable the Thumb only when interacting with the .NET MAUI Slider?
With the Syncfusion® .NET MAUI Slider, you can configure the thumb to appear only during interaction by following these steps:
Step 1: Create a .NET MAUI application project in Visual Studio.
Step 2: Add the Syncfusion.Maui.Sliders NuGet package 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 a dependent for Syncfusion.Maui.Sliders NuGet package and it will be installed automatically when you install the Syncfusion.Maui.Sliders package.
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: Then 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 5: Initially, set the thumb radius to 0 in the ThumbStyle. Then, create two events to handle the interaction start and end.
Using XAML:
<sliders:SfSlider ValueChangeStart="OnValueChangeStart" ValueChangeEnd="OnValueChangeEnd"> <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; slider.ValueChangeStart += OnValueChangeStart; slider.ValueChangeEnd += OnValueChangeEnd; this.Content = slider;
Step 6: Set the thumb radius to 10 in the start event and back to 0 in the end event.
private void OnValueChangeStart(object sender, SliderValueChangeStartEventArgs e)
{
(sender as SfSlider).ThumbStyle.Radius = 10;
}
private void OnValueChangeEnd(object sender, SliderValueChangeEndEventArgs e)
{
(sender as SfSlider).ThumbStyle.Radius = 0;
}
Output:
Conclusion
I hope you enjoyed learning how to enable thumb only when interacting with the .NET MAUI Slider.
You can refer to our .NET MAUI Slider feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. Explore our .NET MAUI Slider example to understand how to create and manipulate data.
For current customers, you can check out our 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 other controls.
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!
