Thumb and Thumb Overlay in WinUI Slider

14 Jul 202612 minutes to read

This section explains how to customize the thumb and thumb overlay in the slider.

Thumb - It is one of the elements of the slider, which is used to drag and change the selected values of the slider.
Thumb overlay - It is rendered around the thumb and is displayed while interacting with the thumb.

Thumb Type

You can change the thumb type using the ThumbType property. The supported values are ThumbType.Circle, and ThumbType.Rectangle. The default value of ThumbType is ThumbType.Circle.

<slider:SfSlider Value="50"
                 ThumbType="Rectangle" />
using Syncfusion.UI.Xaml.Sliders;

SfSlider sfSlider = new SfSlider();
sfSlider.Value = 50;
sfSlider.ThumbType = ThumbType.Rectangle;
this.Content = sfSlider;

Slider with thumb type customization

Thumb Height and Width

You can change the thumb height and width of the slider using the ThumbHeight and ThumbWidth properties respectively. The default values of both properties are 22. The SyncfusionSliderInnerThumbHeight and SyncfusionSliderInnerThumbWidth resource keys define the size of the inner thumb rendered on top of the outer thumb.

<Page.Resources>
    <x:Double x:Key="SyncfusionSliderInnerThumbHeight">18</x:Double>
    <x:Double x:Key="SyncfusionSliderInnerThumbWidth">18</x:Double>
</Page.Resources>

<slider:SfSlider Value="50"
                 ThumbHeight="30"
                 ThumbWidth="30"
                 ActiveTrackHeight="8"
                 InactiveTrackHeight="8" />
SfSlider sfSlider = new SfSlider();
sfSlider.Value = 50;
sfSlider.ThumbHeight = 30;
sfSlider.ThumbWidth = 30;
sfSlider.ActiveTrackHeight = 8;
sfSlider.InactiveTrackHeight = 8;
this.Content = sfSlider;

NOTE

For more information on the ActiveTrackHeight and InactiveTrackHeight properties, refer to the InactiveTrackHeight topic.

Slider with thumb height and width customization

Thumb Background

You can change the thumb background of the slider using the ThumbBackground property.

<slider:SfSlider Value="50"
                 ThumbBackground="#2A934D" />
SfSlider sfSlider = new SfSlider();
sfSlider.Value = 50;
sfSlider.ThumbBackground = new SolidColorBrush(ColorHelper.FromArgb(255, 42, 147, 77));
this.Content = sfSlider;

Slider with thumb background customization

Thumb Hover Background

You can change the thumb hover background of the slider using the SyncfusionSliderThumbBackgroundPointerOver resource key.

<Page.Resources>
    <SolidColorBrush x:Key="SyncfusionSliderThumbBackgroundPointerOver">#009688</SolidColorBrush>
</Page.Resources>

<slider:SfSlider Value="50"
                 ThumbBackground="#33b35c" />
SfSlider sfSlider = new SfSlider();
sfSlider.Value = 50;
sfSlider.ThumbBackground = new SolidColorBrush(ColorHelper.FromArgb(255, 42, 147, 77));
this.Content = sfSlider;

Slider with thumb hover background customization

Thumb Pressed Background

You can change the thumb pressed background of the slider using the SyncfusionSliderThumbBackgroundPressed resource key. The SyncfusionSliderThumbBackgroundPointerOver resource key (covered in the previous section) should also be set so the hover state matches.

<Page.Resources>
    <SolidColorBrush x:Key="SyncfusionSliderThumbBackgroundPointerOver">#009688</SolidColorBrush>
    <SolidColorBrush x:Key="SyncfusionSliderThumbBackgroundPressed">#288e49</SolidColorBrush>
</Page.Resources>

<slider:SfSlider Value="50"
                 ThumbBackground="#33b35c" />
SfSlider sfSlider = new SfSlider();
sfSlider.Value = 50;
sfSlider.ThumbBackground = new SolidColorBrush(ColorHelper.FromArgb(255, 42, 147, 77));
this.Content = sfSlider;

Slider with thumb pressed background customization

Thumb Style

The ThumbStyle property allows you to define the style for the thumb as shown in the following code example.

<coreconverters:FormatStringConverter x:Key="FormatStringConverter" />

<Style x:Name="thumbStyle"
       TargetType="Thumb">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Thumb">
                <Grid>
                    <Ellipse Height="{TemplateBinding Height}"
                             Width="{TemplateBinding Width}"
                             Fill="WhiteSmoke"
                             Stroke="{TemplateBinding Background}"
                             StrokeThickness="2" />
                    <TextBlock Text="{Binding Converter={StaticResource FormatStringConverter},
                                              ConverterParameter='N0'}"
                               FontSize="14"
                               Margin="0,0,0,2"
                               HorizontalTextAlignment="Center"
                               VerticalAlignment="Center" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
    
<slider:SfSlider Value="50"
                 ShowToolTip="False"
                 ThumbHeight="30"
                 ThumbWidth="30"
                 ThumbStyle="{StaticResource thumbStyle}" />
SfSlider sfSlider = new SfSlider();
sfSlider.Value = 50;
sfSlider.ShowToolTip = false;
sfSlider.ThumbHeight = 30;
sfSlider.ThumbWidth = 30;
sfSlider.ThumbStyle = this.Resources["thumbStyle"] as Style;
this.Content = sfSlider;

slider with thumb style customization

NOTE

The DataContext of the thumb template is the current value of the thumb.

Thumb Overlay Radius

The ThumbOverlayRadius property allows you to define the radius for the overlay as shown in the following code example. The default value of ThumbOverlayRadius property is 0, which means no overlay is rendered.

<Style x:Name="thumbStyle"
       TargetType="Thumb">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Thumb">
                <Grid>
                    <Ellipse Fill="{ThemeResource SystemAccentColorDark1}" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<slider:SfSlider Value="50"
                 ShowToolTip="False"
                 ThumbOverlayRadius="20"
                 ThumbStyle="{StaticResource thumbStyle}" />
SfSlider sfSlider = new SfSlider();
sfSlider.Value = 50;
sfSlider.ShowToolTip = false;
sfSlider.ThumbOverlayRadius = 20;
this.Content = sfSlider;

slider with overlay radius customization

Thumb Overlay Fill

The ThumbOverlayFill property allows you to define the fill color for the overlay as shown in the following code example.

<Style x:Name="thumbStyle"
       TargetType="Thumb">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Thumb">
                <Grid>
                    <Ellipse Fill="{ThemeResource SystemAccentColorDark1}" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
        
<slider:SfSlider Value="50"
                 ThumbOverlayFill="Red"
                 ThumbOverlayRadius="10"
                 ThumbStyle="{StaticResource thumbStyle}" />
SfSlider sfSlider = new SfSlider();
sfSlider.Value = 50;
sfSlider.ThumbOverlayFill = new SolidColorBrush(Colors.Red);
this.Content = sfSlider;

slider with overlay fill customization

NOTE

The overlay effect is displayed with 0.3 opacity.

Events

ThumbDragStarted

The ThumbDragStarted event is raised when the thumb drag is started.

<slider:SfSlider Value="50"
                 ThumbDragStarted="SfSlider_ThumbDragStarted" />
private void SfSlider_ThumbDragStarted(object sender, DragStartedEventArgs e)
{
    //Perform action here.
}

ThumbDragCompleted

The ThumbDragCompleted event is raised when the thumb drag is completed.

<slider:SfSlider Value="70"
                 ThumbDragCompleted="SfSlider_ThumbDragCompleted" />
private void SfSlider_ThumbDragCompleted(object sender, DragCompletedEventArgs e)
{
    //Perform action here.
}