How to setup a .NET MAUI discrete slider?

.NET MAUI discrete slider

In .NET MAUI Slider, you can make a thumb move in a discrete manner 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 by opening the NuGet package manager in Visual Studio, then search for Syncfusion.Maui.Sliders and install it.

Step 3: In the MauiProgram.cs file, register the Syncfusion.Maui.Core handler as shown in the following code.

C#

using Syncfusion.Maui.Core.Hosting;
 
namespace SliderDemo
{
  public static class MauiProgram
  {
    public static MauiApp CreateMauiApp()
     {
       var builder = MauiApp.CreateBuilder();
       builder
  .UseMauiApp<App>()
  .ConfigureSyncfusionCore();
       return builder.Build();
      }
   }
}

The Syncfusion.Maui.Core package is dependent on  Syncfusion.Maui.Sliders NuGet package, and it will be installed along with the installation of  Syncfusion.Maui.Sliders package in step 2.

Step 4: Add the .Net MAUI Sliders control namespace in MainPage and initialize the default slider control.

XAML

xmlns:sliders="clr-namespace:Syncfusion.Maui.Sliders;assembly=Syncfusion.Maui.Sliders"

<sliders:SfSlider />

C#

using Syncfusion.Maui.Sliders;

SfSlider slider = new SfSlider();

Step 4: Set the sliders’ Minimum, Maximum, and Value properties. For discrete selection, set the StepSize property for numeric values and the StepDuration property for date-time values as shown in the following code.

Using numeric values

StepSize

The StepSize is a double property. It is used to select slider values based on a specified step value. In the given example, the step value is 2, which means the slider will select values in increments of 2. The resulting selected values will be 0, 2, 4, 6, 8, and 10.

XAML

<sliders:SfSlider  Minimum="0" Maximum="10" Value="4" StepSize="2">
 
</sliders:SfSlider>

C#

SfSlider slider = new SfSlider();
slider.Minimum = 0;
slider.Maximum = 10;
slider.Value = 4;
slider.StepSize = 2;

Using date-time values

StepDuration

The StepDuration is a SliderStepDuration data type property that accepts step values in the form of years, months, days, hours, minutes, and seconds in that order. In the given example, the step duration is 2 years, which means the slider will select values in increments of 2 years. The resulting selected values will be 2010, 2012, 2014, 2016, 2018, and 2020. If expecting the slider to select values in increments of 6 months, the step duration should be set to 0, 6.

Xaml

<sliders:SfDateTimeSlider Minimum="2010-01-01" Maximum="2020-01-01" Value="2014-01-01” StepDuration="2">
 
</sliders:SfDateTimeSlider>

C#

SfDateTimeSlider dateTimeSlider = new SfDateTimeSlider();
dateTimeSlider.Minimum = new DateTime(2010, 01, 01);
dateTimeSlider.Maximum = new DateTime(2020, 01, 01);
dateTimeSlider.Value = new DateTime(2014, 01, 01);
dateTimeSlider.StepDuration = new SliderStepDuration(2);

Output

Check the following links for more features in Syncfusion MAUI Sliders:

• Syncfusion MAUI Sliders product page
• User guide documentation for Sliders

Conclusion

I hope you enjoyed learning about how to setup a .NET MAUI discrete slider.

You can refer to our .NET MAUI Slider’s feature tour page to know about its other groundbreaking feature representations. You can also 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 Slider and other .NET MAUI components.

If you have any queries or require clarifications, please let us know in the comment section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!