Customizing UWP Slider Thumb

The default UWP Slider control features a very simple rectangular thumb. Luckily enough, thanks to the customizability of XAML design you can replace the default thumb with a custom control to give your app a fresh and original look.

Custom thumb

The default template of the Slider control contains a custom style for the Thumb control:

As we can see, the Thumb uses a Border with CornerRadius as its template. We can cut this template contents and replace it with anything else. A great replacement is an Image control:

C#

1

2

3

<ControlTemplate TargetType="Thumb">

<Image Source="/Assets/Thumb.png"/>

</ControlTemplate>

Furthermore, if your icon is monochromatic, we might want to use BitmapIcon as this will allow your thumb to automatically take on the accent color of the OS.

C#

1

2

3

<ControlTemplate TargetType="Thumb">

<BitmapIcon UriSource="/Assets/Thumb.png"/>

</ControlTemplate>

There is one more thing we need to do however. The default Slider template explicitly sets the Width and Height of the thumb to be quite small. Search for HorizontalThumb and VerticalThumb declarations in the template and update them with different dimensions that suit your icon more: