Divisors in WinUI RangeSlider (Range Slider)

26 May 20219 minutes to read

This section explains about how to show the divisors in the range slider.

Show Divisors

The ShowDivisors property is used to render the divisors on the track. The default value of the ShowDivisors 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 divisors at 0, 10, 20 and so on.

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

Range slider with divisors

Divisors Height and Width

You can change the divisor height and width of the RangeSlider using the DivisorHeight and DivisorWidth properties respectively.

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

Range slider with divisor height and width customization

Divisor Stroke Thickness and Stroke

You can change the divisor stroke thickness of the range slider using the DivisorStrokeThickness property. The default value of DivisorStrokeThickness is 0. Also, you can change the divisor stroke of the range slider using the DivisorStroke property.

<slider:SfRangeSlider RangeStart="30"
                      RangeEnd="70"
                      Interval="10"
                      ShowDivisors="True"
                      DivisorHeight="10"
                      DivisorWidth="10"
                      DivisorStrokeThickness="2"
                      DivisorStroke="Red" />
SfRangeSlider sfRangeSlider = new SfRangeSlider();
sfRangeSlider.RangeStart = 30;
sfRangeSlider.RangeEnd = 70;
sfRangeSlider.Interval = 10;
sfRangeSlider.ShowDivisors = true;
sfRangeSlider.DivisorHeight = 10;
sfRangeSlider.DivisorWidth = 10;
sfRangeSlider.DivisorStrokeThickness = 2;
sfRangeSlider.DivisorStroke = new SolidColorBrush(Colors.Red);
this.Content = sfRangeSlider;

Range slider with divisor stroke customization

Divisor Fill

You can change the divisor fill of the range slider using the DivisorFill property.

<slider:SfRangeSlider RangeStart="30"
                      RangeEnd="70"
                      Interval="10"
                      ShowDivisors="True"
                      DivisorHeight="10"
                      DivisorWidth="10"
                      DivisorFill="#ff7979" />
SfRangeSlider sfRangeSlider = new SfRangeSlider();
sfRangeSlider.RangeStart = 30;
sfRangeSlider.RangeEnd = 70;
sfRangeSlider.Interval = 10;
sfRangeSlider.ShowDivisors = true;
sfRangeSlider.DivisorHeight = 10;
sfRangeSlider.DivisorWidth = 10;
sfRangeSlider.DivisorFill = new SolidColorBrush(ColorHelper.FromArgb(255,255, 121, 121));
this.Content = sfRangeSlider;

Range slider with divisor fill customization

Divisor Template

Setting a Template for Divisors

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

<DataTemplate x:Key="DivisorTemplate">
    <Rectangle Height="{Binding DivisorHeight}"
               Width="{Binding DivisorWidth}"
               Fill="{ThemeResource SystemAltHighColor}"
               Stroke="{ThemeResource SystemAccentColor}"
               StrokeThickness="{Binding DivisorStrokeThickness}" />
</DataTemplate>

<slider:SfRangeSlider RangeStart="30"
                      RangeEnd="70"
                      Interval="10"
                      ShowDivisors="True"
                      DivisorHeight="10"
                      DivisorWidth="10"
                      DivisorStrokeThickness="2"
                      DivisorTemplate="{StaticResource DivisorTemplate}">
</slider:SfRangeSlider>
SfRangeSlider sfRangeSlider = new SfRangeSlider();
sfRangeSlider.ShowDivisors = true;
sfRangeSlider.DivisorHeight = 10;
sfRangeSlider.DivisorWidth = 10;
sfRangeSlider.DivisorStrokeThickness = 2;
sfRangeSlider.DivisorTemplate = this.Resources["DivisorTemplate"] as DataTemplate;
sfRangeSlider.RangeStart = 30;
sfRangeSlider.RangeEnd = 70;
this.Content = sfRangeSlider;

Range slider with divisor template customization

NOTE

Its DataContext is SliderBase.

Setting a Active Template for Divisors

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

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

<slider:SfRangeSlider RangeStart="30"
                      RangeEnd="70"
                      Interval="10"
                      ShowDivisors="True"
                      DivisorHeight="5"
                      DivisorWidth="5"
                      ActiveDivisorTemplate="{StaticResource ActiveDivisorTemplate}">
</slider:SfRangeSlider>
SfRangeSlider sfRangeSlider = new SfRangeSlider();
sfRangeSlider.ShowDivisors = true;
sfRangeSlider.DivisorHeight = 5;
sfRangeSlider.DivisorWidth = 5;
sfRangeSlider.ActiveDivisorTemplate = this.Resources["ActiveDivisorTemplate"] as DataTemplate;
sfRangeSlider.RangeStart = 30;
sfRangeSlider.RangeEnd = 70;
this.Content = sfRangeSlider;

Slider with active divisor template customization