Dividers in WinUI RangeSlider (Range Slider)

14 Jul 202610 minutes to read

This section explains how to show dividers in the range slider.

Show Dividers

The ShowDividers property is used to render the dividers on the track. The default value of the ShowDividers property is false. Dividers are shapes used to represent the major interval points on the track. Dividers are rendered based on the Interval property, or the auto-calculated interval when no interval is specified.

For example, if Minimum is 0, Maximum is 100, and Interval is 10, the slider will render the dividers at 0, 10, 20 and so on.

XAML

<slider:SfRangeSlider RangeStart="30"
                      RangeEnd="70"
                      Interval="10"
                      ShowDividers="True" />

C#

SfRangeSlider sfRangeSlider = new SfRangeSlider();
sfRangeSlider.RangeStart = 30;
sfRangeSlider.RangeEnd = 70;
sfRangeSlider.Interval = 10;
sfRangeSlider.ShowDividers = true;
this.Content = sfRangeSlider;

Dividers Height and Width

You can change the divider height and width of the RangeSlider using the DividerHeight and DividerWidth properties respectively.

XAML

<slider:SfRangeSlider RangeStart="30"
                      RangeEnd="70"
                      Interval="10"
                      ShowDividers="True"
                      DividerHeight="4"
                      DividerWidth="4" />

C#

SfRangeSlider sfRangeSlider = new SfRangeSlider();
sfRangeSlider.RangeStart = 30;
sfRangeSlider.RangeEnd = 70;
sfRangeSlider.Interval = 10;
sfRangeSlider.ShowDividers = true;
sfRangeSlider.DividerHeight = 4;
sfRangeSlider.DividerWidth = 4;
this.Content = sfRangeSlider;

Divider Stroke Thickness and Stroke

You can change the divider stroke thickness of the range slider using the DividerStrokeThickness property. The default value of DividerStrokeThickness is 0. Also, you can change the divider stroke of the range slider using the DividerStroke property, which accepts a Brush value.

XAML

<slider:SfRangeSlider RangeStart="30"
                      RangeEnd="70"
                      Interval="10"
                      ShowDividers="True"
                      DividerHeight="10"
                      DividerWidth="10"
                      DividerStrokeThickness="2"
                      DividerStroke="Red" />

C#

SfRangeSlider sfRangeSlider = new SfRangeSlider();
sfRangeSlider.RangeStart = 30;
sfRangeSlider.RangeEnd = 70;
sfRangeSlider.Interval = 10;
sfRangeSlider.ShowDividers = true;
sfRangeSlider.DividerHeight = 10;
sfRangeSlider.DividerWidth = 10;
sfRangeSlider.DividerStrokeThickness = 2;
sfRangeSlider.DividerStroke = new SolidColorBrush(Colors.Red);
this.Content = sfRangeSlider;

Divider Fill

You can change the divider fill of the range slider using the DividerFill property.

NOTE

The ColorHelper used in the C# example is part of the Syncfusion.UI.Xaml.Core namespace.

XAML

<slider:SfRangeSlider RangeStart="30"
                      RangeEnd="70"
                      Interval="10"
                      ShowDividers="True"
                      DividerHeight="10"
                      DividerWidth="10"
                      DividerFill="#ff7979" />

C#

SfRangeSlider sfRangeSlider = new SfRangeSlider();
sfRangeSlider.RangeStart = 30;
sfRangeSlider.RangeEnd = 70;
sfRangeSlider.Interval = 10;
sfRangeSlider.ShowDividers = true;
sfRangeSlider.DividerHeight = 10;
sfRangeSlider.DividerWidth = 10;
sfRangeSlider.DividerFill = new SolidColorBrush(ColorHelper.FromArgb(255,255, 121, 121));
this.Content = sfRangeSlider;

Divider Template

Setting a Template for Dividers

The DividerTemplate property allows you to define a data template for the dividers, as shown in the following code sample.

XAML

<DataTemplate x:Key="DividerTemplate">
    <Rectangle Height="{Binding DividerHeight}"
               Width="{Binding DividerWidth}"
               Fill="{ThemeResource SystemAltHighColor}"
               Stroke="{ThemeResource SystemAccentColorDark1}"
               StrokeThickness="{Binding DividerStrokeThickness}" />
</DataTemplate>

<slider:SfRangeSlider RangeStart="30"
                      RangeEnd="70"
                      Interval="10"
                      ShowDividers="True"
                      DividerHeight="10"
                      DividerWidth="10"
                      DividerStrokeThickness="2"
                      DividerTemplate="{StaticResource DividerTemplate}">
</slider:SfRangeSlider>

C#

SfRangeSlider sfRangeSlider = new SfRangeSlider();
sfRangeSlider.ShowDividers = true;
sfRangeSlider.DividerHeight = 10;
sfRangeSlider.DividerWidth = 10;
sfRangeSlider.DividerStrokeThickness = 2;
sfRangeSlider.DividerTemplate = this.Resources["DividerTemplate"] as DataTemplate;
sfRangeSlider.RangeStart = 30;
sfRangeSlider.RangeEnd = 70;
this.Content = sfRangeSlider;

NOTE

The divider template’s DataContext is SliderBase.

Setting an Active Template for Dividers

The ActiveDividerTemplate property allows you to define a custom data template for the active divider, as shown in the following code sample.

XAML

<DataTemplate x:Key="ActiveDividerTemplate">
    <Rectangle Height="{Binding DividerHeight}"
               Width="{Binding DividerWidth}"
               Fill="{ThemeResource SystemAltHighColor}"
               Stroke="{ThemeResource SystemAccentColorDark1}"
               StrokeThickness="2" />
</DataTemplate>

<slider:SfRangeSlider RangeStart="30"
                      RangeEnd="70"
                      Interval="10"
                      ShowDividers="True"
                      DividerHeight="5"
                      DividerWidth="5"
                      ActiveDividerTemplate="{StaticResource ActiveDividerTemplate}">
</slider:SfRangeSlider>

C#

SfRangeSlider sfRangeSlider = new SfRangeSlider();
sfRangeSlider.ShowDividers = true;
sfRangeSlider.DividerHeight = 5;
sfRangeSlider.DividerWidth = 5;
sfRangeSlider.ActiveDividerTemplate = this.Resources["ActiveDividerTemplate"] as DataTemplate;
sfRangeSlider.RangeStart = 30;
sfRangeSlider.RangeEnd = 70;
this.Content = sfRangeSlider;