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
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:

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.

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:

Full style

Source code

Example code for this article is available on my GitHub.

Summary

We have taken a look at how the Thumb control within a Slider can be styled. In spite of being a simple trick, it will go long way to making your app more appealing to the users.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

*