Getting Started with WinUI Slider

18 Dec 2020 / 3 minutes to read

This section explains the steps required to add the Slider control and its elements such as values, ticks, divisors, labels, and tooltip. This section covers only basic features needed to get started with Syncfusion Slider.

Creating an application with WinUI Slider

  1. Create a simple project using the instructions given in the Getting Started with your first WinUI app documentation.

  2. Add reference to Syncfusion.Sliders.WinUI NuGet.

  3. Import the control namespace Syncfusion.UI.Xaml.Sliders in XAML or C# code.

  4. Initialize the SfSlider control

The default value of the Minimum and Maximum properties of the SfSlider is 0 and 100 respectively. So, the Value property must be given within the range.

<slider:SfSlider />
SfSlider sfSlider = new SfSlider();
this.Content = sfSlider;

Set Value

You can show value in the slider by setting double value to the Value properties.

<slider:SfSlider Value="50" />
SfSlider sfSlider = new SfSlider();
sfSlider.Value = 50;
this.Content = sfSlider;

Setting value to slider

Enable Ticks

You can enable ticks in the slider using the ShowTicks property.

<slider:SfSlider Value="50"
                 ShowTicks="True" />
SfSlider sfSlider = new SfSlider();
sfSlider.Value = 50;
sfSlider.ShowTicks = true;
this.Content = sfSlider;

Slider with ticks

Enable Labels

You can enable labels in the slider using the ShowLabels property.

<slider:SfSlider Value="50"
                 ShowLabels="True" />
SfSlider sfSlider = new SfSlider();
sfSlider.Value = 50;
sfSlider.ShowLabels = true;
this.Content = sfSlider;

Slider with labels

Enable Divisors

You can enable divisors in the slider using the ShowDivisors property.

<slider:SfSlider Value="50"
                 ShowDivisors="True"
                 DivisorHeight="4"
                 DivisorWidth="4"
                 ActiveTrackHeight="4"
                 InactiveTrackHeight="4" />
SfSlider sfSlider = new SfSlider();
sfSlider.Value = 50;
sfSlider.ShowDivisors = true;
sfSlider.DivisorHeight = 4;
sfSlider.DivisorWidth = 4;
sfSlider.ActiveTrackHeight = 4;
sfSlider.InactiveTrackHeight = 4;
this.Content = sfSlider;

Slider with divisors

NOTE

Download demo application from the GitHub