Getting Started with WinUI RangeSlider (Range Slider)

18 Dec 2020 / 4 minutes to read

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

Creating an application with WinUI Range 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 SfRangeSlider control

The default value of the Minimum and Maximum properties of the SfRangeSlider is 0 and 100 respectively. So, the RangeStart and RangeEnd properties must be given within the 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 Divisors

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

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

Range slider with divisors

NOTE

Download demo application from the GitHub