Getting Started with WinUI RangeSlider (Range Slider)

14 Jul 20265 minutes to read

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

Creating an application with WinUI Range Slider

  1. Create a WinUI 3 desktop app for C# and .NET 5.

  2. Add a reference to the Syncfusion.Sliders.WinUI NuGet package.

  3. Import the control namespace Syncfusion.UI.Xaml.Sliders in XAML or C# code. In XAML, add the following namespace declaration:

xmlns:slider="using:Syncfusion.UI.Xaml.Sliders"
  1. Initialize the SfRangeSlider control.

NOTE

The default values of the Minimum and Maximum properties of the SfRangeSlider are 0 and 100 respectively. So, the RangeStart and RangeEnd properties must be set within this range.

<slider:SfRangeSlider />
SfRangeSlider sfRangeSlider = new SfRangeSlider();
   this.Content = sfRangeSlider;

Set Values

You can show values in the range slider by setting double values to the RangeStart and RangeEnd properties.

<slider:SfRangeSlider RangeStart="30"
                      RangeEnd="70" />
SfRangeSlider sfRangeSlider = new SfRangeSlider();
sfRangeSlider.RangeStart = 30;
sfRangeSlider.RangeEnd = 70;
this.Content = sfRangeSlider;

Setting values to range slider

Enable Ticks

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

<slider:SfRangeSlider RangeStart="30"
                      RangeEnd="70"
                      ShowTicks="True" />
SfRangeSlider sfRangeSlider = new SfRangeSlider();
sfRangeSlider.RangeStart = 30;
sfRangeSlider.RangeEnd = 70;
sfRangeSlider.ShowTicks = true;
this.Content = sfRangeSlider;

Range slider with ticks

Enable Labels

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

<slider:SfRangeSlider RangeStart="30"
                      RangeEnd="70"
                      ShowLabels="True" />
SfRangeSlider sfRangeSlider = new SfRangeSlider();
sfRangeSlider.RangeStart = 30;
sfRangeSlider.RangeEnd = 70;
sfRangeSlider.ShowLabels = true;
this.Content = sfRangeSlider;

Range slider with labels

Enable Dividers

You can enable dividers in the range slider using the ShowDividers property.

<slider:SfRangeSlider RangeStart="30"
                      RangeEnd="70"
                      ShowDividers="True"
                      DividerHeight="4"
                      DividerWidth="4"
                      ActiveTrackHeight="4"
                      InactiveTrackHeight="4" />
SfRangeSlider sfRangeSlider = new SfRangeSlider();
sfRangeSlider.RangeStart = 30;
sfRangeSlider.RangeEnd = 70;
sfRangeSlider.ShowDividers = true;
sfRangeSlider.DividerHeight = 4;
sfRangeSlider.DividerWidth = 4;
sfRangeSlider.ActiveTrackHeight = 4;
sfRangeSlider.InactiveTrackHeight = 4;
this.Content = sfRangeSlider;

Range slider with dividers

NOTE

The ActiveTrackHeight and InactiveTrackHeight properties shown above customize the track height.

NOTE

Download the demo application from GitHub.