title: Create slider with different before / after thumb background color
body: <p>I'm currently working on a media player. I'd like to create a slider like the one on this screen shot:</p>
  
  <p><img src="https://i.stack.imgur.com/e3JQ3.png" alt="slider"></p>
  
  <p>What I've got up to now is this one:</p>
  
  <p><img src="https://i.stack.imgur.com/4N9e7.png" alt="current_slider"></p>
  
  <p>I'm currently struggeling with the light bar before the thumb. It changes it's length according to the thumb position. How can I implement this in WPF? Or should I try using a progressbar?</p>
  
  <p>Atm, I have this code:</p>
  
  <pre><code>   &lt;LinearGradientBrush x:Key="SliderThumbGradient" StartPoint="0,0" EndPoint="0,1"&gt;
      &lt;GradientStop Offset="0" Color="#f7f7f7"/&gt;
      &lt;GradientStop Offset="1" Color="#bcbcbc"/&gt;
  &lt;/LinearGradientBrush&gt;
  
  &lt;Style x:Key="SliderButtonStyle" TargetType="{x:Type RepeatButton}"&gt;
      &lt;Setter Property="SnapsToDevicePixels" Value="true"/&gt;
      &lt;Setter Property="OverridesDefaultStyle" Value="true"/&gt;
      &lt;Setter Property="IsTabStop" Value="false"/&gt;
      &lt;Setter Property="Focusable" Value="false"/&gt;
      &lt;Setter Property="Template"&gt;
          &lt;Setter.Value&gt;
              &lt;ControlTemplate TargetType="{x:Type RepeatButton}"&gt;
                  &lt;Border Background="Transparent" /&gt;
              &lt;/ControlTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  &lt;/Style&gt;
  
  &lt;Style x:Key="SliderThumbStyle" TargetType="{x:Type Thumb}"&gt;
      &lt;Setter Property="SnapsToDevicePixels" Value="true"/&gt;
      &lt;Setter Property="OverridesDefaultStyle" Value="true"/&gt;
      &lt;Setter Property="Height" Value="14"/&gt;
      &lt;Setter Property="Width" Value="14"/&gt;
      &lt;Setter Property="Template"&gt;
          &lt;Setter.Value&gt;
              &lt;ControlTemplate TargetType="{x:Type Thumb}"&gt;
                  &lt;Ellipse 
        Name="Ellipse" 
        Fill="{DynamicResource SliderThumbGradient}"
        Stroke="#404040"
        StrokeThickness="1" /&gt;
                  &lt;ControlTemplate.Triggers&gt;
                      &lt;Trigger Property="IsMouseOver" Value="True"&gt;
                          &lt;Setter TargetName="Ellipse" Property="Fill" Value="#808080"/&gt;
                      &lt;/Trigger&gt;
                      &lt;Trigger Property="IsEnabled" Value="false"&gt;
                          &lt;Setter TargetName="Ellipse" Property="Fill" Value="#EEEEEE"/&gt;
                      &lt;/Trigger&gt;
                  &lt;/ControlTemplate.Triggers&gt;
              &lt;/ControlTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  &lt;/Style&gt;
  
  &lt;ControlTemplate x:Key="HorizontalSlider" TargetType="{x:Type Slider}"&gt;
      &lt;Grid&gt;
          &lt;Grid.RowDefinitions&gt;
              &lt;RowDefinition Height="Auto"/&gt;
              &lt;RowDefinition Height="Auto" MinHeight="{TemplateBinding Slider.MinHeight}"/&gt;
              &lt;RowDefinition Height="Auto"/&gt;
          &lt;/Grid.RowDefinitions&gt;
          &lt;TickBar 
    Name="TopTick"
    SnapsToDevicePixels="True" 
    Placement="Top"
    Fill="#404040"
    Height="4"
    Visibility="Collapsed" /&gt;
          &lt;Border 
    Name="TrackBackground"
    Margin="0"
    CornerRadius="6" 
    Height="12"
    Grid.Row="1"
    Background="#0a0a0a" 
    BorderBrush="#121212"
    BorderThickness="1" /&gt;
          &lt;Track Grid.Row="1" Name="PART_Track"&gt;
              &lt;Track.DecreaseRepeatButton&gt;
                  &lt;RepeatButton 
        Style="{StaticResource SliderButtonStyle}"
        Command="Slider.DecreaseLarge" /&gt;
              &lt;/Track.DecreaseRepeatButton&gt;
              &lt;Track.Thumb&gt;
                  &lt;Thumb Style="{StaticResource SliderThumbStyle}" /&gt;
              &lt;/Track.Thumb&gt;
              &lt;Track.IncreaseRepeatButton&gt;
                  &lt;RepeatButton 
        Style="{StaticResource SliderButtonStyle}"
        Command="Slider.IncreaseLarge" /&gt;
              &lt;/Track.IncreaseRepeatButton&gt;
          &lt;/Track&gt;
          &lt;TickBar 
    Name="BottomTick"
    SnapsToDevicePixels="True" 
    Grid.Row="2"
    Fill="{TemplateBinding Foreground}"
    Placement="Bottom"
    Height="4"
    Visibility="Collapsed" /&gt;
      &lt;/Grid&gt;
      &lt;ControlTemplate.Triggers&gt;
          &lt;Trigger Property="TickPlacement" Value="TopLeft"&gt;
              &lt;Setter TargetName="TopTick" Property="Visibility" Value="Visible"/&gt;
          &lt;/Trigger&gt;
          &lt;Trigger Property="TickPlacement" Value="BottomRight"&gt;
              &lt;Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/&gt;
          &lt;/Trigger&gt;
          &lt;Trigger Property="TickPlacement" Value="Both"&gt;
              &lt;Setter TargetName="TopTick" Property="Visibility" Value="Visible"/&gt;
              &lt;Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/&gt;
          &lt;/Trigger&gt;
      &lt;/ControlTemplate.Triggers&gt;
  &lt;/ControlTemplate&gt;
  
  &lt;ControlTemplate x:Key="VerticalSlider" TargetType="{x:Type Slider}"&gt;
      &lt;Grid&gt;
          &lt;Grid.ColumnDefinitions&gt;
              &lt;ColumnDefinition Width="Auto"/&gt;
              &lt;ColumnDefinition Width="Auto" MinWidth="{TemplateBinding Slider.MinWidth}"/&gt;
              &lt;ColumnDefinition Width="Auto"/&gt;
          &lt;/Grid.ColumnDefinitions&gt;
          &lt;TickBar 
    Name="TopTick"
    SnapsToDevicePixels="True" 
    Placement="Left"
    Fill="#404040"
    Width="4"
    Visibility="Collapsed" /&gt;
          &lt;Border 
    Name="TrackBackground"
    Margin="0"
    CornerRadius="2" 
    Width="4"
    Grid.Column="1"
    Background="#E0E0E0" 
    BorderBrush="#404040"
    BorderThickness="1" /&gt;
          &lt;Track Grid.Column="1" Name="PART_Track"&gt;
              &lt;Track.DecreaseRepeatButton&gt;
                  &lt;RepeatButton 
        Style="{StaticResource SliderButtonStyle}"
        Command="Slider.DecreaseLarge" /&gt;
              &lt;/Track.DecreaseRepeatButton&gt;
              &lt;Track.Thumb&gt;
                  &lt;Thumb Style="{StaticResource SliderThumbStyle}" /&gt;
              &lt;/Track.Thumb&gt;
              &lt;Track.IncreaseRepeatButton&gt;
                  &lt;RepeatButton 
        Style="{StaticResource SliderButtonStyle}"
        Command="Slider.IncreaseLarge" /&gt;
              &lt;/Track.IncreaseRepeatButton&gt;
          &lt;/Track&gt;
          &lt;TickBar 
    Name="BottomTick"
    SnapsToDevicePixels="True" 
    Grid.Column="2"
    Fill="{TemplateBinding Foreground}"
    Placement="Right"
    Width="4"
    Visibility="Collapsed" /&gt;
      &lt;/Grid&gt;
      &lt;ControlTemplate.Triggers&gt;
          &lt;Trigger Property="TickPlacement" Value="TopLeft"&gt;
              &lt;Setter TargetName="TopTick" Property="Visibility" Value="Visible"/&gt;
          &lt;/Trigger&gt;
          &lt;Trigger Property="TickPlacement" Value="BottomRight"&gt;
              &lt;Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/&gt;
          &lt;/Trigger&gt;
          &lt;Trigger Property="TickPlacement" Value="Both"&gt;
              &lt;Setter TargetName="TopTick" Property="Visibility" Value="Visible"/&gt;
              &lt;Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/&gt;
          &lt;/Trigger&gt;
      &lt;/ControlTemplate.Triggers&gt;
  &lt;/ControlTemplate&gt;
  
  &lt;Style TargetType="{x:Type Slider}"&gt;
      &lt;Setter Property="SnapsToDevicePixels" Value="true"/&gt;
      &lt;Setter Property="OverridesDefaultStyle" Value="true"/&gt;
      &lt;Style.Triggers&gt;
          &lt;Trigger Property="Orientation" Value="Horizontal"&gt;
              &lt;Setter Property="MinWidth" Value="104" /&gt;
              &lt;Setter Property="MinHeight" Value="21" /&gt;
              &lt;Setter Property="Template" Value="{StaticResource HorizontalSlider}" /&gt;
          &lt;/Trigger&gt;
          &lt;Trigger Property="Orientation" Value="Vertical"&gt;
              &lt;Setter Property="MinWidth" Value="21" /&gt;
              &lt;Setter Property="MinHeight" Value="104" /&gt;
              &lt;Setter Property="Template" Value="{StaticResource VerticalSlider}" /&gt;
          &lt;/Trigger&gt;
      &lt;/Style.Triggers&gt;
  &lt;/Style&gt;
  </code></pre>