How to setup a .NET MAUI Discrete Slider?

6 mins read

In .NET MAUI, you can set up a discrete slider using the Syncfusion® MAUI Sliders 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 your 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 in the following code.

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.

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

XAML

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

<sliders:SfSlider />

using Syncfusion.Maui.Sliders;

SfSlider slider = new SfSlider();

Step 5: Specify 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>

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>

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

Conclusion

I hope you enjoyed learning how to set up a .NET MAUI Discrete Slider.
You can refer to our .NET MAUI Slider feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI Slider documentation to understand how to present and manipulate data.
You can check out our .NET MAUI components from the License and Downloads page for current customers. If you are new to Syncfusion®, 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 clarification, 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!

Did you find this information helpful?

Yes

Comments (0)

How to setup a .NET MAUI Discrete Slider?

Access denied