Track in WinUI Slider

18 Nov 20186 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#

using Syncfusion.UI.Xaml.Sliders;

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;

When the IsInversed property is set to true, the active and inactive sides are flipped.

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 the cursor hovers over 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 the cursor presses on the slider control. The SyncfusionSliderActiveTrackFillPointerOver and SyncfusionSliderInactiveTrackFillPointerOver resource keys (covered in the previous section) should also be set so the hover state matches.

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 values of 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 values of 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;