Dividers in WinUI Slider

14 Jul 20268 minutes to read

This section explains how to show the dividers in the 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 of the track.

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:SfSlider Value="50"
                 Interval="10"
                 ShowDividers="True" />

C#

using Syncfusion.UI.Xaml.Sliders;

SfSlider sfSlider = new SfSlider();
sfSlider.Value = 50;
sfSlider.Interval = 10;
sfSlider.ShowDividers = true;
this.Content = sfSlider;

Dividers Height and Width

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

XAML

<slider:SfSlider Value="50"
                 Interval="10"
                 ShowDividers="True"
                 DividerHeight="4"
                 DividerWidth="4" />

C#

SfSlider sfSlider = new SfSlider();
sfSlider.Value = 50;
sfSlider.Interval = 10;
sfSlider.ShowDividers = true;
sfSlider.DividerHeight = 4;
sfSlider.DividerWidth = 4;
this.Content = sfSlider;

Divider Stroke Thickness and Stroke

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

XAML

<slider:SfSlider Value="50"
                 Interval="10"
                 ShowDividers="True"
                 DividerHeight="10"
                 DividerWidth="10"
                 DividerStrokeThickness="2"
                 DividerStroke="Red" />

C#

SfSlider sfSlider = new SfSlider();
sfSlider.Value = 50;
sfSlider.Interval = 10;
sfSlider.ShowDividers = true;
sfSlider.DividerHeight = 10;
sfSlider.DividerWidth = 10;
sfSlider.DividerStrokeThickness = 2;
sfSlider.DividerStroke = new SolidColorBrush(Colors.Red);
this.Content = sfSlider;

Divider Fill

You can change the divider fill of the slider using the DividerFill property. The default value of DividerFill is null.

XAML

<slider:SfSlider Value="50"
                 Interval="10"
                 ShowDividers="True"
                 DividerHeight="10"
                 DividerWidth="10"
                 DividerFill="#ff7979" />

C#

SfSlider sfSlider = new SfSlider();
sfSlider.Value = 50;
sfSlider.Interval = 10;
sfSlider.ShowDividers = true;
sfSlider.DividerHeight = 10;
sfSlider.DividerWidth = 10;
sfSlider.DividerFill = new SolidColorBrush(ColorHelper.FromArgb(255, 255, 121, 121));
this.Content = sfSlider;

Divider Template

Setting a Template for Dividers

The DividerTemplate property allows you to define the data template for the dividers as shown in the following code sample. The default value of DividerHeight and DividerWidth is 2.

XAML

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

<slider:SfSlider Value="50"
                 Interval="10"
                 ShowDividers="True"
                 DividerHeight="10"
                 DividerWidth="10"
                 DividerStrokeThickness="2"
                 DividerTemplate="{StaticResource DividerTemplate}">
</slider:SfSlider>

C#

SfSlider sfSlider = new SfSlider();
sfSlider.ShowDividers = true;
sfSlider.DividerHeight = 10;
sfSlider.DividerWidth = 10;
sfSlider.DividerStrokeThickness = 2;
sfSlider.DividerTemplate = this.Resources["DividerTemplate"] as DataTemplate;
sfSlider.Value = 50;
this.Content = sfSlider;

NOTE

The DataContext of the divider template is SliderBase.

Setting an Active Template for Dividers

The ActiveDividerTemplate property allows you to define the data template for the active divider, i.e., the divider that is currently under the thumb, as shown in the following code sample.

XAML

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

<slider:SfSlider Value="50"
                 Interval="10"
                 ShowDividers="True"
                 DividerHeight="5"
                 DividerWidth="5"
                 ActiveDividerTemplate="{StaticResource ActiveDividerTemplate}">
</slider:SfSlider>

C#

SfSlider sfSlider = new SfSlider();
sfSlider.ShowDividers = true;
sfSlider.DividerHeight = 5;
sfSlider.DividerWidth = 5;
sfSlider.ActiveDividerTemplate = this.Resources["ActiveDividerTemplate"] as DataTemplate;
sfSlider.Value = 50;
this.Content = sfSlider;