I've created custom slider and thumb templates for my app. It's working as expected except for the PART_SelectionRange Rectangle, which begins slightly behind the thumb and by the time the maximum value is reached is noticeably far behind it.
I have no clue how this could be fixed since it looks like the problem is in the behaviour of whatever class is controlling the size of the PART_SelectionRange Rectangle.
(Sorry, I don't know how to inline it).
<ControlTemplate x:Key="SliderThumbHorizontalDefault" TargetType="{x:Type Thumb}">
<Grid>
<!-- SliderThumb -->
<Path x:Name="grip" Data="M-0.4,6.4 C1.2,1 9,1 10.5,6.5 12,11.787571 5.0267407,18.175417 5.0267407,18.175417 5.0267407,18.175417 -2,11.8 -0.4,6.4 z"
Fill="White" Stretch="Fill" SnapsToDevicePixels="True"
Stroke="Black" StrokeThickness="1" UseLayoutRounding="True" />
<ContentPresenter Margin="0 4 0 0" Content="{Binding Value, RelativeSource={RelativeSource AncestorType={x:Type Slider}}}" TextBlock.Foreground="Black" TextBlock.FontSize="20" TextBlock.TextAlignment="Center" />
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="SliderHorizontal" TargetType="{x:Type Slider}">
<ControlTemplate.Resources>
<vc:TickConverter x:Key="TickConverter" />
</ControlTemplate.Resources>
<Grid Height="{StaticResource SliderHeight}">
<Border x:Name="TrackBackground" BorderBrush="{StaticResource SliderThumb.Track.Border}" BorderThickness="0"
Background="White"
CornerRadius="{Binding ActualHeight, Converter={StaticResource HalvingConverter}, ElementName=TrackBackground}">
<!-- This rectangle is what lags behind! -->
<Rectangle x:Name="PART_SelectionRange" Fill="SlateBlue"
HorizontalAlignment="Left" RadiusY="3" RadiusX="3" />
</Border>
<Track x:Name="PART_Track" >
<Track.Thumb>
<Thumb x:Name="Thumb" Focusable="False" Width="35" Height="47" OverridesDefaultStyle="True"
Template="{StaticResource SliderThumbHorizontalDefault}" Margin="-14.65,-55,-16,12"/>
</Track.Thumb>
</Track>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelectionRangeEnabled" Value="true">
<Setter Property="Visibility" TargetName="PART_SelectionRange" Value="Visible" />
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="Foreground" TargetName="Thumb" Value="Blue" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style TargetType="{x:Type Slider}">
<Setter Property="MinHeight" Value="{StaticResource SliderHeight}" />
<Setter Property="MaxHeight" Value="{StaticResource SliderHeight}" />
<Setter Property="Stylus.IsPressAndHoldEnabled" Value="false" />
<Setter Property="IsSelectionRangeEnabled" Value="True" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Foreground" Value="{StaticResource SliderThumb.Static.Foreground}" />
<Setter Property="SelectionStart" Value="{Binding Minimum, RelativeSource={RelativeSource Self}}" />
<Setter Property="SelectionEnd" Value="{Binding Value, RelativeSource={RelativeSource Self}}" />
<Setter Property="Template" Value="{StaticResource SliderHorizontal}" />
</Style>
At this point I don't know what I should be trying to modify. I believe I've tried changing every property that made sense from xaml, so I think the problem is in the Slider class, but can't fathom where.