Dividers in WinUI RangeSlider (Range Slider)

17 Jun 20219 minutes to read

This section explains about how to show the 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. It is a shape, which is 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.

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

Range slider with dividers

Dividers Height and Width

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

<slider:SfRangeSlider RangeStart="30"
                      RangeEnd="70"
                      Interval="10"
                      ShowDividers="True"
                      DividerHeight="4"
                      DividerWidth="4" />
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;

Range slider with divider height and width customization

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.

<slider:SfRangeSlider RangeStart="30"
                      RangeEnd="70"
                      Interval="10"
                      ShowDividers="True"
                      DividerHeight="10"
                      DividerWidth="10"
                      DividerStrokeThickness="2"
                      DividerStroke="Red" />
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;

Range slider with divider stroke customization

Divider Fill

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

<slider:SfRangeSlider RangeStart="30"
                      RangeEnd="70"
                      Interval="10"
                      ShowDividers="True"
                      DividerHeight="10"
                      DividerWidth="10"
                      DividerFill="#ff7979" />
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;

Range slider with divider fill customization

Divider Template

Setting a Template for Dividers

The DividerTemplate property allows you to define the data template for the divider’s as shown in the following code sample.

<DataTemplate x:Key="DividerTemplate">
    <Rectangle Height="{Binding DividerHeight}"
               Width="{Binding DividerWidth}"
               Fill="{ThemeResource SystemAltHighColor}"
               Stroke="{ThemeResource SystemAccentColor}"
               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>
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;

Range slider with divider template customization

NOTE

Its DataContext is SliderBase.

Setting a Active Template for Dividers

The DividerTemplate property allows you to define the data template for the divider’s as shown in the following code sample.

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

<slider:SfRangeSlider RangeStart="30"
                      RangeEnd="70"
                      Interval="10"
                      ShowDividers="True"
                      DividerHeight="5"
                      DividerWidth="5"
                      ActiveDividerTemplate="{StaticResource ActiveDividerTemplate}">
</slider:SfRangeSlider>
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;

Slider with active divider template customization