Custom Image Slider UWP

MainPage.xaml

<Page x:Class="SliderDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SliderDemo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Page.Resources>
        <Style x:Key="MySliderStyle" TargetType="Slider">
            <Setter Property="Background" Value="{ThemeResource SliderTrackFill}"/>
            <Setter Property="BorderThickness" Value="{ThemeResource SliderBorderThemeThickness}"/>
            <Setter Property="Foreground" Value="{ThemeResource SliderTrackValueFill}"/>
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
            <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
            <Setter Property="ManipulationMode" Value="None"/>
            <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"/>
            <Setter Property="FocusVisualMargin" Value="-7,0,-7,0"/>
            <Setter Property="IsFocusEngagementEnabled" Value="True"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Slider">
                        <Grid Margin="{TemplateBinding Padding}">
                            <Grid.Resources>
                                <Style x:Key="SliderThumbStyle"
                                       TargetType="Thumb">
                                    <Setter Property="BorderThickness"
                                            Value="0" />
                                    <Setter Property="Background"
                                            Value="{ThemeResource SliderThumbBackground}" />
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="Thumb">
                                                <!-- Custom Thumb element-->
                                                <Grid BorderThickness="{TemplateBinding BorderThickness}"
                                                      BorderBrush="{TemplateBinding BorderBrush}"
                                                      CornerRadius="4">
                                                    <Image Source="/Images/thumb.png" />
                                                </Grid>

                                                <!-- Original Thumb element  -->
                                                <!--<Border Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="4"/>-->
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </Grid.Resources>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalTrackRect" Storyboard.TargetProperty="Fill">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackFillPressed}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalTrackRect" Storyboard.TargetProperty="Fill">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackFillPressed}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderThumbBackgroundPressed}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderThumbBackgroundPressed}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderContainerBackgroundPressed}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalDecreaseRect" Storyboard.TargetProperty="Fill">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackValueFillPressed}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalDecreaseRect" Storyboard.TargetProperty="Fill">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackValueFillPressed}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderHeaderForegroundDisabled}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalDecreaseRect" Storyboard.TargetProperty="Fill">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackValueFillDisabled}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalTrackRect" Storyboard.TargetProperty="Fill">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackFillDisabled}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalDecreaseRect" Storyboard.TargetProperty="Fill">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackValueFillDisabled}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalTrackRect" Storyboard.TargetProperty="Fill">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackFillDisabled}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderThumbBackgroundDisabled}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderThumbBackgroundDisabled}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TopTickBar" Storyboard.TargetProperty="Fill">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTickBarFillDisabled}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BottomTickBar" Storyboard.TargetProperty="Fill">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTickBarFillDisabled}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LeftTickBar" Storyboard.TargetProperty="Fill">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTickBarFillDisabled}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RightTickBar" Storyboard.TargetProperty="Fill">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTickBarFillDisabled}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderContainerBackgroundDisabled}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalTrackRect" Storyboard.TargetProperty="Fill">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackFillPointerOver}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalTrackRect" Storyboard.TargetProperty="Fill">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackFillPointerOver}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderThumbBackgroundPointerOver}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderThumbBackgroundPointerOver}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderContainerBackgroundPointerOver}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalDecreaseRect" Storyboard.TargetProperty="Fill">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackValueFillPointerOver}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalDecreaseRect" Storyboard.TargetProperty="Fill">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackValueFillPointerOver}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusEngagementStates">
                                    <VisualState x:Name="FocusDisengaged"/>
                                    <VisualState x:Name="FocusEngagedHorizontal">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer" Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="False"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="True"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="FocusEngagedVertical">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer" Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="False"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb" Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="True"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ContentPresenter x:Name="HeaderContentPresenter" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" FontWeight="{ThemeResource SliderHeaderThemeFontWeight}" Foreground="{ThemeResource SliderHeaderForeground}" Margin="{StaticResource SliderTopHeaderMargin}" Grid.Row="0" TextWrapping="Wrap" Visibility="Collapsed" x:DeferLoadStrategy="Lazy"/>
                            <Grid x:Name="SliderContainer"
                                  Background="{ThemeResource SliderContainerBackground}"
                                  Control.IsTemplateFocusTarget="True"
                                  Grid.Row="1">
                                <Grid x:Name="HorizontalTemplate"
                                      MinHeight="{ThemeResource SliderHorizontalHeight}">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="{ThemeResource SliderPreContentMargin}" />
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="{ThemeResource SliderPostContentMargin}" />
                                    </Grid.RowDefinitions>
                                    <Rectangle x:Name="HorizontalTrackRect"
                                               Grid.ColumnSpan="3"
                                               Fill="{TemplateBinding Background}"
                                               Height="{ThemeResource SliderTrackThemeHeight}"
                                               Grid.Row="1" />
                                    <Rectangle x:Name="HorizontalDecreaseRect"
                                               Fill="{TemplateBinding Foreground}"
                                               Grid.Row="1" />
                                    <TickBar x:Name="TopTickBar"
                                             Grid.ColumnSpan="3"
                                             Fill="{ThemeResource SliderTickBarFill}"
                                             Height="{ThemeResource SliderOutsideTickBarThemeHeight}"
                                             Margin="0,0,0,4"
                                             VerticalAlignment="Bottom"
                                             Visibility="Collapsed" />
                                    <TickBar x:Name="HorizontalInlineTickBar"
                                             Grid.ColumnSpan="3"
                                             Fill="{ThemeResource SliderInlineTickBarFill}"
                                             Height="{ThemeResource SliderTrackThemeHeight}"
                                             Grid.Row="1"
                                             Visibility="Collapsed" />
                                    <TickBar x:Name="BottomTickBar"
                                             Grid.ColumnSpan="3"
                                             Fill="{ThemeResource SliderTickBarFill}"
                                             Height="{ThemeResource SliderOutsideTickBarThemeHeight}"
                                             Margin="0,4,0,0"
                                             Grid.Row="2"
                                             VerticalAlignment="Top"
                                             Visibility="Collapsed" />
                                    <Thumb x:Name="HorizontalThumb"
                                           AutomationProperties.AccessibilityView="Raw"
                                           Grid.Column="1"
                                           DataContext="{TemplateBinding Value}"
                                           FocusVisualMargin="-14,-6,-14,-6"
                                           Height="24"
                                           Grid.RowSpan="3"
                                           Grid.Row="0"
                                           Style="{StaticResource SliderThumbStyle}"
                                           Width="24" />
                                </Grid>
                                <Grid x:Name="VerticalTemplate"
                                      MinWidth="{ThemeResource SliderVerticalWidth}"
                                      Visibility="Collapsed">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="{ThemeResource SliderPreContentMargin}" />
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="{ThemeResource SliderPostContentMargin}" />
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="Auto" />
                                    </Grid.RowDefinitions>
                                    <Rectangle x:Name="VerticalTrackRect"
                                               Grid.Column="1"
                                               Fill="{TemplateBinding Background}"
                                               Grid.RowSpan="3"
                                               Width="{ThemeResource SliderTrackThemeHeight}" />
                                    <Rectangle x:Name="VerticalDecreaseRect"
                                               Grid.Column="1"
                                               Fill="{TemplateBinding Foreground}"
                                               Grid.Row="2" />
                                    <TickBar x:Name="LeftTickBar"
                                             Fill="{ThemeResource SliderTickBarFill}"
                                             HorizontalAlignment="Right"
                                             Margin="0,0,4,0"
                                             Grid.RowSpan="3"
                                             Visibility="Collapsed"
                                             Width="{ThemeResource SliderOutsideTickBarThemeHeight}" />
                                    <TickBar x:Name="VerticalInlineTickBar"
                                             Grid.Column="1"
                                             Fill="{ThemeResource SliderInlineTickBarFill}"
                                             Grid.RowSpan="3"
                                             Visibility="Collapsed"
                                             Width="{ThemeResource SliderTrackThemeHeight}" />
                                    <TickBar x:Name="RightTickBar"
                                             Grid.Column="2"
                                             Fill="{ThemeResource SliderTickBarFill}"
                                             HorizontalAlignment="Left"
                                             Margin="4,0,0,0"
                                             Grid.RowSpan="3"
                                             Visibility="Collapsed"
                                             Width="{ThemeResource SliderOutsideTickBarThemeHeight}" />
                                    <Thumb x:Name="VerticalThumb"
                                           AutomationProperties.AccessibilityView="Raw"
                                           Grid.ColumnSpan="3"
                                           Grid.Column="0"
                                           DataContext="{TemplateBinding Value}"
                                           FocusVisualMargin="-6,-14,-6,-14"
                                           Height="24"
                                           Grid.Row="1"
                                           Style="{StaticResource SliderThumbStyle}"
                                           Width="24" />
                                </Grid>
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

    <Grid Background="White">
        <Slider Style="{StaticResource MySliderStyle}" VerticalAlignment="Center" Width="400"/>
    </Grid>
</Page>

MainPage.xaml.cs

using Windows.UI.Xaml.Controls;

namespace SliderDemo
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }
    }
}

See lines 35-40 for the definition of the custom Thumb. Next, see that the custom width and height of the Thumb implementations are 24x24 (in lines 222&226 and 277&280)