Avalonia/src/Avalonia.Themes.Fluent/Controls/Slider.xaml

<ResourceDictionary xmlns="https://github.com/avaloniaui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:sys="using:System"
                    x:ClassModifier="internal">
  <Design.PreviewWith>
    <Border Margin="20" Width="400" Height="600">
      <DockPanel LastChildFill="True">
        <StackPanel Spacing="10" DockPanel.Dock="Top">
          <Slider Value="50" />
          <Slider IsDirectionReversed="True" Value="50" />
          <Slider Value="50" TickPlacement="TopLeft" TickFrequency="10"/>
          <Slider Value="50" TickPlacement="BottomRight" TickFrequency="10"/>
          <Slider Value="50" TickPlacement="Outside" TickFrequency="10"/>
          <Slider IsEnabled="False" Value="50" />
          <Slider Value="50">
            <DataValidationErrors.Error>
              <sys:Exception>
                <x:Arguments>
                  <x:String>Error</x:String>
                </x:Arguments>
              </sys:Exception>
            </DataValidationErrors.Error>
          </Slider>
        </StackPanel>
        <StackPanel Spacing="10" Orientation="Horizontal">
          <Slider Value="50" Orientation="Vertical" />
          <Slider IsDirectionReversed="True" Value="50" Orientation="Vertical" />
          <Slider IsEnabled="False" Orientation="Vertical" Value="50" />
          <Slider Value="50" TickPlacement="TopLeft" TickFrequency="10" Orientation="Vertical" />
          <Slider Value="50" TickPlacement="BottomRight" TickFrequency="10" Orientation="Vertical" />
          <Slider Value="50" TickPlacement="Outside" TickFrequency="10" Orientation="Vertical" />
        </StackPanel>
      </DockPanel>
    </Border>
  </Design.PreviewWith>
  
  <Thickness x:Key="SliderTopHeaderMargin">0,0,0,4</Thickness>
  <GridLength x:Key="SliderPreContentMargin">15</GridLength>
  <GridLength x:Key="SliderPostContentMargin">15</GridLength>
  <x:Double x:Key="SliderHorizontalHeight">32</x:Double>
  <x:Double x:Key="SliderVerticalWidth">32</x:Double>
  <CornerRadius x:Key="SliderThumbCornerRadius">10</CornerRadius>
  <x:Double x:Key="SliderHorizontalThumbWidth">20</x:Double>
  <x:Double x:Key="SliderHorizontalThumbHeight">20</x:Double>
  <x:Double x:Key="SliderVerticalThumbWidth">20</x:Double>
  <x:Double x:Key="SliderVerticalThumbHeight">20</x:Double>

  <ControlTheme x:Key="FluentSliderHorizontalRepeatButton" TargetType="RepeatButton">
    <Setter Property="Template">
      <ControlTemplate>
        <Grid>
          <Border Name="FocusTarget" Margin="0,-10" Background="Transparent" />
          <Border Name="TrackBackground"
                  Background="{TemplateBinding Background}"
                  CornerRadius="{DynamicResource ControlCornerRadius}"
                  Height="{DynamicResource SliderTrackThemeHeight}"
                  VerticalAlignment="Center"/>
        </Grid>
      </ControlTemplate>
    </Setter>
  </ControlTheme>

  <ControlTheme x:Key="FluentSliderVerticalRepeatButton" TargetType="RepeatButton">
    <Setter Property="Template">
      <ControlTemplate>
        <Grid>
          <Border Name="FocusTarget" Margin="0,-10" Background="Transparent" />
          <Border Name="TrackBackground"
                  Background="{TemplateBinding Background}"
                  CornerRadius="{DynamicResource ControlCornerRadius}"
                  Width="{DynamicResource SliderTrackThemeHeight}"
                  HorizontalAlignment="Center"/>
        </Grid>
      </ControlTemplate>
    </Setter>
  </ControlTheme>

  <ControlTheme x:Key="FluentSliderThumbTheme" TargetType="Thumb">
    <Setter Property="Template">
      <ControlTemplate>
        <Border
            Background="{TemplateBinding Background}"
            BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}"
            CornerRadius="{DynamicResource SliderThumbCornerRadius}" />
      </ControlTemplate>
    </Setter>
  </ControlTheme>

  <ControlTheme x:Key="{x:Type Slider}" TargetType="Slider">
    <Setter Property="Background" Value="{DynamicResource SliderTrackFill}" />
    <Setter Property="BorderThickness" Value="{DynamicResource SliderBorderThemeThickness}" />
    <Setter Property="Foreground" Value="{DynamicResource SliderTrackValueFill}" />
    <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
    <Style Selector="^:horizontal">
      <Setter Property="Template">
        <ControlTemplate>
          <DataValidationErrors>
            <Border
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                CornerRadius="{TemplateBinding CornerRadius}">
                <Grid x:Name="SliderContainer"
                      Margin="{TemplateBinding Padding}"
                      Background="{DynamicResource SliderContainerBackground}">
                  <Grid.Styles>
                    <Style Selector="TickBar">
                      <Setter Property="ReservedSpace" Value="{Binding #PART_Track.Thumb.Bounds}" />
                    </Style>
                  </Grid.Styles>
                  <Grid
                      x:Name="HorizontalTemplate"
                      MinHeight="{DynamicResource SliderHorizontalHeight}"
                      ColumnDefinitions="Auto,Auto,*">
                    <Grid.RowDefinitions>
                      <RowDefinition Height="{DynamicResource SliderPreContentMargin}" />
                      <RowDefinition Height="Auto" />
                      <RowDefinition Height="{DynamicResource SliderPostContentMargin}" />
                    </Grid.RowDefinitions>
                    <TickBar
                        Name="TopTickBar"
                        Grid.ColumnSpan="3"
                        Ticks="{TemplateBinding Ticks}"
                        TickFrequency="{TemplateBinding Slider.TickFrequency}"
                        Orientation="{TemplateBinding Slider.Orientation}"
                        Minimum="{TemplateBinding Slider.Minimum}"
                        Maximum="{TemplateBinding Slider.Maximum}"
                        Height="{DynamicResource SliderOutsideTickBarThemeHeight}"
                        Margin="0,0,0,4"
                        VerticalAlignment="Bottom"
                        Placement="Top" 
                        IsVisible="False"
                        Fill="{DynamicResource SliderTickBarFill}"/>
                    <TickBar
                        Name="BottomTickBar"
                        Grid.Row="2"
                        Grid.ColumnSpan="3"
                        Ticks="{TemplateBinding Ticks}"
                        TickFrequency="{TemplateBinding Slider.TickFrequency}"
                        Orientation="{TemplateBinding Slider.Orientation}"
                        Minimum="{TemplateBinding Slider.Minimum}"
                        Maximum="{TemplateBinding Slider.Maximum}"
                        Height="{DynamicResource SliderOutsideTickBarThemeHeight}"
                        Margin="0,4,0,0"
                        VerticalAlignment="Top"
                        Placement="Bottom"
                        IsVisible="False"
                        Fill="{DynamicResource SliderTickBarFill}" />
                    <Track
                        Name="PART_Track"
                        Grid.Row="1"
                        Grid.ColumnSpan="3"
                        Minimum="{TemplateBinding Minimum}"
                        Maximum="{TemplateBinding Maximum}"
                        Value="{TemplateBinding Value, Mode=TwoWay}"
                        IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
                        Orientation="Horizontal">
                      <Track.DecreaseButton>
                        <RepeatButton
                            Name="PART_DecreaseButton"
                            Theme="{StaticResource FluentSliderHorizontalRepeatButton}"
                            Background="{TemplateBinding Foreground}"
                            Focusable="False"/>
                      </Track.DecreaseButton>
                      <Track.IncreaseButton>
                        <RepeatButton
                            Name="PART_IncreaseButton"
                            Theme="{StaticResource FluentSliderHorizontalRepeatButton}"
                            Background="{TemplateBinding Background}"
                            Focusable="False"/>
                      </Track.IncreaseButton>
                      <Thumb
                          Name="thumb"
                          Width="{DynamicResource SliderHorizontalThumbWidth}"
                          Height="{DynamicResource SliderHorizontalThumbHeight}"
                          Margin="0"
                          Padding="0"
                          Background="{DynamicResource SliderThumbBackground}"
                          BorderThickness="0"
                          Theme="{StaticResource FluentSliderThumbTheme}"
                          DataContext="{TemplateBinding Value}"/>
                    </Track>
                  </Grid>
                </Grid>
            </Border>
          </DataValidationErrors>
        </ControlTemplate>
      </Setter>
    </Style>
    <Style Selector="^:vertical">
      <Setter Property="Template">
        <ControlTemplate>
          <DataValidationErrors>
            <Border
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                CornerRadius="{TemplateBinding CornerRadius}">
                <Grid x:Name="SliderContainer"
                      Grid.Row="1"
                      Background="{DynamicResource SliderContainerBackground}"
                      Margin="{TemplateBinding Padding}">
                  <Grid.Styles>
                    <Style Selector="TickBar">
                      <Setter Property="ReservedSpace" Value="{Binding #PART_Track.Thumb.Bounds}" />
                    </Style>
                  </Grid.Styles>
                  <Grid
                      x:Name="VerticalTemplate"
                      MinWidth="{DynamicResource SliderVerticalWidth}"
                      RowDefinitions="*,Auto,Auto">
                    <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="{DynamicResource SliderPreContentMargin}" />
                      <ColumnDefinition Width="Auto" />
                      <ColumnDefinition Width="{DynamicResource SliderPostContentMargin}" />
                    </Grid.ColumnDefinitions>
                    <TickBar
                        Name="LeftTickBar"
                        Grid.RowSpan="3"
                        Ticks="{TemplateBinding Ticks}"
                        TickFrequency="{TemplateBinding Slider.TickFrequency}"
                        Orientation="{TemplateBinding Slider.Orientation}"
                        Minimum="{TemplateBinding Slider.Minimum}"
                        Maximum="{TemplateBinding Slider.Maximum}"
                        Width="{DynamicResource SliderOutsideTickBarThemeHeight}"
                        Margin="0,0,4,0"
                        HorizontalAlignment="Right"
                        Placement="Left"
                        IsVisible="False"
                        Fill="{DynamicResource SliderTickBarFill}"/>
                    <TickBar
                        Name="RightTickBar"
                        Grid.RowSpan="3"
                        Grid.Column="2"
                        Ticks="{TemplateBinding Ticks}"
                        TickFrequency="{TemplateBinding Slider.TickFrequency}"
                        Orientation="{TemplateBinding Slider.Orientation}"
                        Minimum="{TemplateBinding Slider.Minimum}"
                        Maximum="{TemplateBinding Slider.Maximum}"
                        Width="{DynamicResource SliderOutsideTickBarThemeHeight}"
                        Margin="4,0,0,0"
                        HorizontalAlignment="Left"
                        Placement="Right" 
                        IsVisible="False"
                        Fill="{DynamicResource SliderTickBarFill}"/>
                    <Track
                        Name="PART_Track"
                        Grid.RowSpan="3"
                        Grid.Column="1"
                        Grid.ColumnSpan="1"
                        Minimum="{TemplateBinding Minimum}"
                        Maximum="{TemplateBinding Maximum}"
                        Value="{TemplateBinding Value, Mode=TwoWay}"
                        IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
                        Orientation="Vertical">
                      <Track.DecreaseButton>
                        <RepeatButton
                            Name="PART_DecreaseButton"
                            Theme="{StaticResource FluentSliderVerticalRepeatButton}"
                            Background="{TemplateBinding Foreground}"
                            Focusable="False"/>
                      </Track.DecreaseButton>
                      <Track.IncreaseButton>
                        <RepeatButton
                            Name="PART_IncreaseButton"
                            Background="{TemplateBinding Background}"
                            Theme="{StaticResource FluentSliderVerticalRepeatButton}"
                            Focusable="False"/>
                      </Track.IncreaseButton>
                      <Thumb
                          Name="SliderThumb"
                          Width="{DynamicResource SliderVerticalThumbWidth}"
                          Height="{DynamicResource SliderVerticalThumbHeight}"
                          Margin="0"
                          Padding="0"
                          Background="{DynamicResource SliderThumbBackground}"
                          BorderThickness="0"
                          Theme="{StaticResource FluentSliderThumbTheme}"
                          DataContext="{TemplateBinding Value}" />
                    </Track>
                  </Grid>
                </Grid>
            </Border>
          </DataValidationErrors>
        </ControlTemplate>
      </Setter>
    </Style>

    <!--  TickBar Placement States  -->

    <Style Selector="^[TickPlacement=TopLeft] /template/ TickBar#LeftTickBar, ^[TickPlacement=Outside] /template/ TickBar#LeftTickBar">
      <Setter Property="IsVisible" Value="True" />
    </Style>

    <Style Selector="^[TickPlacement=TopLeft] /template/ TickBar#TopTickBar, ^[TickPlacement=Outside] /template/ TickBar#TopTickBar">
      <Setter Property="IsVisible" Value="True" />
    </Style>

    <Style Selector="^[TickPlacement=BottomRight] /template/ TickBar#BottomTickBar, ^[TickPlacement=Outside] /template/ TickBar#BottomTickBar">
      <Setter Property="IsVisible" Value="True" />
    </Style>

    <Style Selector="^[TickPlacement=BottomRight] /template/ TickBar#RightTickBar, ^[TickPlacement=Outside] /template/ TickBar#RightTickBar">
      <Setter Property="IsVisible" Value="True" />
    </Style>

    <!--  PointerOver State  -->
    <Style Selector="^:pointerover">
      <Style Selector="^ /template/ Grid#SliderContainer">
        <Setter Property="Background" Value="{DynamicResource SliderContainerBackgroundDisabled}" />
      </Style>
      <Style Selector="^ /template/ RepeatButton#PART_IncreaseButton">
        <Setter Property="Background" Value="{DynamicResource SliderTrackFillPointerOver}" />
      </Style>

      <Style Selector="^ /template/ Thumb">
        <Setter Property="Background" Value="{DynamicResource SliderThumbBackgroundPointerOver}" />
      </Style>

      <Style Selector="^ /template/ Grid#SliderContainer">
        <Setter Property="Background" Value="{DynamicResource SliderContainerBackgroundPointerOver}" />
      </Style>

      <Style Selector="^ /template/ RepeatButton#PART_DecreaseButton">
        <Setter Property="Background" Value="{DynamicResource SliderTrackValueFillPointerOver}" />
      </Style>

    </Style>

    <!--  Pressed State  -->
    <Style Selector="^:pressed">
      <Style Selector="^ /template/ Grid#SliderContainer">
        <Setter Property="Background" Value="{DynamicResource SliderContainerBackgroundPressed}" />
      </Style>
      <Style Selector="^ /template/ RepeatButton#PART_DecreaseButton">
        <Setter Property="Background" Value="{DynamicResource SliderTrackValueFillPressed}" />
      </Style>
      <Style Selector="^ /template/ RepeatButton#PART_IncreaseButton">
        <Setter Property="Background" Value="{DynamicResource SliderTrackFillPressed}" />
      </Style>

      <Style Selector="^ /template/ Thumb">
        <Setter Property="Background" Value="{DynamicResource SliderThumbBackgroundPressed}" />
      </Style>
    </Style>

    <!--  Disabled State  -->
    <Style Selector="^:disabled">
      <Style Selector="^ /template/ RepeatButton#PART_DecreaseButton">
        <Setter Property="Background" Value="{DynamicResource SliderTrackValueFillDisabled}" />
      </Style>

      <Style Selector="^ /template/ RepeatButton#PART_IncreaseButton">
        <Setter Property="Background" Value="{DynamicResource SliderTrackFillDisabled}" />
      </Style>

      <Style Selector="^ /template/ Thumb">
        <Setter Property="Background" Value="{DynamicResource SliderThumbBackgroundDisabled}" />
      </Style>

      <Style Selector="^ /template/ TickBar">
        <Setter Property="Fill" Value="{DynamicResource SliderTickBarFillDisabled}" />
      </Style>
    </Style>

    <Style Selector="^:error">
      <Setter Property="Foreground" Value="{DynamicResource SystemControlErrorTextForegroundBrush}" />
      <Style Selector="^ /template/ Thumb">
        <Setter Property="Background" Value="{DynamicResource SystemControlErrorTextForegroundBrush}" />
      </Style>
    </Style>

  </ControlTheme>
</ResourceDictionary>