Track in WinUI Slider

14 Mar 20226 minutes to read

This section explains how to customize the track in the slider.

Track Color

You can change the active and inactive track color of the slider using the ActiveTrackFill and InactiveTrackFill properties respectively.

The active side of the slider is between the Minimum value and the thumb.

The inactive side of the slider is between the thumb and the Maximum value.

XAML

<slider:SfSlider Value="50"
                 ActiveTrackFill="#009688"
                 InactiveTrackFill="#C2E6E3" />

C#

SfSlider sfSlider = new SfSlider();
sfSlider.Value = 50;
sfSlider.ActiveTrackFill = new SolidColorBrush(ColorHelper.FromArgb(255, 0, 150, 136));
sfSlider.InactiveTrackFill = new SolidColorBrush(ColorHelper.FromArgb(255, 194, 230, 227));
this.Content = sfSlider;

Track Hover Color

You can change the active and inactive track hover color of the slider using the SyncfusionSliderActiveTrackFillPointerOver and SyncfusionSliderInactiveTrackFillPointerOver resource keys respectively. This color will be applied when hovering the cursor on the Slider control.

XAML

<Page.Resources>
    <SolidColorBrush x:Key="SyncfusionSliderActiveTrackFillPointerOver">#009688</SolidColorBrush>
    <SolidColorBrush x:Key="SyncfusionSliderInactiveTrackFillPointerOver">#C2E6E3</SolidColorBrush>
</Page.Resources>

<slider:SfSlider Value="50"
                 ActiveTrackFill="#006688"
                 InactiveTrackFill="#A2E6E3" />

C#

SfSlider sfSlider = new SfSlider();
sfSlider.Value = 50;
sfSlider.ActiveTrackFill = new SolidColorBrush(ColorHelper.FromArgb(255, 0, 150, 136));
sfSlider.InactiveTrackFill = new SolidColorBrush(ColorHelper.FromArgb(255, 194, 230, 227));
this.Content = sfSlider;

Track Pressed Color

You can change the active and inactive track pressed color of the slider using the SyncfusionSliderActiveTrackFillPressed and SyncfusionSliderInactiveTrackFillPressed resource keys respectively. This color will be applied when pressed the cursor on the slider control.

XAML

<Page.Resources>
    <SolidColorBrush x:Key="SyncfusionSliderActiveTrackFillPointerOver">#009688</SolidColorBrush>
    <SolidColorBrush x:Key="SyncfusionSliderInactiveTrackFillPointerOver">#C2E6E3</SolidColorBrush>
    
    <SolidColorBrush x:Key="SyncfusionSliderActiveTrackFillPressed">#018A7D</SolidColorBrush>
    <SolidColorBrush x:Key="SyncfusionSliderInactiveTrackFillPressed">#98B8B5</SolidColorBrush>
</Page.Resources>

<slider:SfSlider Value="50"
                 ActiveTrackFill="#006688"
                 InactiveTrackFill="#A2E6E3"  />

C#

SfSlider sfSlider = new SfSlider();
sfSlider.Value = 50;
sfSlider.ActiveTrackFill = new SolidColorBrush(ColorHelper.FromArgb(255, 0, 150, 136));
sfSlider.InactiveTrackFill = new SolidColorBrush(ColorHelper.FromArgb(255, 194, 230, 227));
this.Content = sfSlider;

Track Height

You can change the track height of the slider using the ActiveTrackHeight and InactiveTrackHeight properties. The default value of the both properties are 2.

XAML

<slider:SfSlider Value="50"
                 ActiveTrackHeight="8"
                 InactiveTrackHeight="8"  />

C#

SfSlider sfSlider = new SfSlider();
sfSlider.Value = 50;
sfSlider.ActiveTrackHeight = 8;
sfSlider.InactiveTrackHeight = 8;
this.Content = sfSlider;

Track Style

You can change the track style of the slider using the ActiveTrackStyle and InactiveTrackStyle properties. The default value of the both properties are null.

XAML

<Page.Resources>
    <Style x:Key="ActiveTrackStyle"
            TargetType="Rectangle">
        <Setter Property="RadiusX"
                Value="4" />
        <Setter Property="RadiusY"
                Value="4" />
    </Style>

    <Style x:Key="InactiveTrackStyle"
            TargetType="Rectangle">
        <Setter Property="RadiusX"
                Value="3" />
        <Setter Property="RadiusY"
                Value="3" />
    </Style>
</Page.Resources>
    
<slider:SfSlider Value="50"
                 ActiveTrackHeight="8"
                 InactiveTrackHeight="6"
                 ActiveTrackStyle="{StaticResource ActiveTrackStyle}"
                 InactiveTrackStyle="{StaticResource InactiveTrackStyle}"/>

C#

SfSlider sfSlider = new SfSlider();
sfSlider.Value = 50;
sfSlider.ActiveTrackHeight = 8;
sfSlider.InactiveTrackHeight = 6;
sfSlider.ActiveTrackStyle = this.Resources["ActiveTrackStyle"] as Style;
sfSlider.InactiveTrackStyle = this.Resources["InactiveTrackStyle"] as Style;
this.Content = sfSlider;