CustomSlider.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:EtherCAT_Master"
                    xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro">


    <!--<ArithmeticConverter x:Key="arithConverter" />-->

    <!--Flat Slider Style-->
    <Style x:Key="SliderButtonStyleDecrease" TargetType="{x:Type RepeatButton}">
        <Setter Property="Focusable" Value="false" />
        <Setter Property="IsTabStop" Value="false" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Grid SnapsToDevicePixels="True" >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="137"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                    <!--<Canvas Margin="0,-4,0,0" VerticalAlignment="Center">-->
                        <!--<Border x:Name="PART_SelectionRange" Grid.Column="1" Height="{TemplateBinding Slider.Height}" Width="Auto" Background="{DynamicResource AccentColorBrush2}" />-->
                    <!--</Canvas>-->
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="SliderButtonStyleIncrease" TargetType="{x:Type RepeatButton}">
        <Setter Property="Focusable" Value="false" />
        <Setter Property="IsTabStop" Value="false" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Grid  >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="137"/>
                        </Grid.ColumnDefinitions>
                        <!--<Canvas Margin="0,-4,0,0" VerticalAlignment="Center">-->
                        <!--<Border x:Name="PART_SelectionRange" Grid.Column="0" Height="{TemplateBinding Slider.Height}" Width="Auto" Background="{DynamicResource AccentColorBrush2}" />-->
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="SliderThumbStyle" TargetType="{x:Type Thumb}">
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <Grid Background="{TemplateBinding Background}" >
                        <TextBlock HorizontalAlignment="Center" 
                                        VerticalAlignment="Center"
                                        Foreground="White"
                                        FontSize="10"
                                        FontWeight="Bold"
                                        Text="{Binding Value, RelativeSource={RelativeSource AncestorType={x:Type Slider}}}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="SliderTickBarStyle" TargetType="TickBar">
        <Setter Property="Fill" Value="{DynamicResource SliderThumbDisabled}" />
        <Setter Property="Visibility" Value="Collapsed" />
        <Style.Triggers>
            <Trigger Property="Placement" Value="Top">
                <Setter Property="Height" Value="6" />
                <Setter Property="Margin" Value="0 0 0 3" />
            </Trigger>
            <Trigger Property="Placement" Value="Bottom">
                <Setter Property="Grid.Row" Value="2" />
                <Setter Property="Height" Value="6" />
                <Setter Property="Margin" Value="0 3 0 0" />
            </Trigger>

            <Trigger Property="Placement" Value="Left">
                <Setter Property="Margin" Value="0 0 3 0" />
                <Setter Property="Width" Value="6" />
            </Trigger>
            <Trigger Property="Placement" Value="Right">
                <Setter Property="Grid.Column" Value="2" />
                <Setter Property="Margin" Value="3 0 0 0" />
                <Setter Property="Width" Value="6" />
            </Trigger>
        </Style.Triggers>
    </Style>

    <ControlTemplate x:Key="HorizontalSliderCustom" TargetType="{x:Type Slider}">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" MinHeight="{TemplateBinding Slider.MinHeight}" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <TickBar x:Name="TopTick"
                     Placement="Top"
                     Style="{StaticResource SliderTickBarStyle}" />
            
            <Track x:Name="PART_Track" Grid.Row="1">
                <Track.DecreaseRepeatButton>
                    <RepeatButton Height="{TemplateBinding Slider.Height}"
                                  Background="{TemplateBinding Slider.Foreground}"
                                  Command="Slider.DecreaseLarge"
                                  Style="{DynamicResource SliderButtonStyleDecrease}" />
                    
                </Track.DecreaseRepeatButton>
                
             
                
                <Track.Thumb>
                    <Controls:MetroThumb Width="{TemplateBinding Slider.Height}"
                                         Height="{TemplateBinding Slider.Height}"
                                         Background="{TemplateBinding Slider.BorderBrush}"
                                         Style="{StaticResource SliderThumbStyle}" />
                </Track.Thumb>
                <Track.IncreaseRepeatButton>
                    <RepeatButton Height="{TemplateBinding Slider.Height}"
                                  Background="{TemplateBinding Slider.Background}"
                                  Command="Slider.IncreaseLarge"
                                  Style="{DynamicResource SliderButtonStyleIncrease}" />
                </Track.IncreaseRepeatButton>
            </Track>

            

            <Canvas Margin="0,-4,0,0" VerticalAlignment="Center">
                <Border x:Name="PART_SelectionRange" IsHitTestVisible="False" Height="{TemplateBinding Slider.Height}" Background="Gray" />
            </Canvas>

            <TickBar x:Name="BottomTick"
                     Placement="Bottom"
                     Style="{StaticResource SliderTickBarStyle}" />
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="TickPlacement" Value="TopLeft">
                <Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
            </Trigger>
            <Trigger Property="TickPlacement" Value="BottomRight">
                <Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
            </Trigger>
            <Trigger Property="TickPlacement" Value="Both">
                <Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
                <Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <ControlTemplate x:Key="VerticalSlider" TargetType="{x:Type Slider}">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" MinWidth="{TemplateBinding Slider.MinWidth}" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <TickBar x:Name="TopTick"
                     Placement="Left"
                     Style="{StaticResource SliderTickBarStyle}" />
            <Track x:Name="PART_Track" Grid.Column="1">
                <Track.DecreaseRepeatButton>
                    <RepeatButton Height="{TemplateBinding Slider.Height}"
                                  Background="{TemplateBinding Slider.Background}"
                                  Command="Slider.DecreaseLarge"
                                  Style="{StaticResource SliderButtonStyle}" />
                </Track.DecreaseRepeatButton>
                <Track.Thumb>
                    <Controls:MetroThumb Width="{TemplateBinding Slider.Width}"
                                         Height="{TemplateBinding Slider.Width}"
                                         Background="{TemplateBinding Slider.BorderBrush}"
                                         Style="{StaticResource SliderThumbStyle}" />
                </Track.Thumb>
                <Track.IncreaseRepeatButton>
                    <RepeatButton Height="{TemplateBinding Slider.Height}"
                                  Background="{TemplateBinding Slider.Background}"
                                  Command="Slider.IncreaseLarge"
                                  Style="{StaticResource SliderButtonStyle}" />
                </Track.IncreaseRepeatButton>
            </Track>
            <TickBar x:Name="BottomTick"
                     Placement="Right"
                     Style="{StaticResource SliderTickBarStyle}" />
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="TickPlacement" Value="TopLeft">
                <Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
            </Trigger>
            <Trigger Property="TickPlacement" Value="BottomRight">
                <Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
            </Trigger>
            <Trigger Property="TickPlacement" Value="Both">
                <Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
                <Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <Style x:Key="CustomSlider" TargetType="{x:Type Slider}">
        <Setter Property="Background" Value="{DynamicResource SliderTrackNormal}" />
        <Setter Property="BorderBrush" Value="{DynamicResource BlackBrush}" />
        <Setter Property="Foreground" Value="{DynamicResource AccentColorBrush2}" />
        <!--<Setter Property="Maximum" Value="100" />-->
        <!--<Setter Property="Minimum" Value="0" />-->
        <Setter Property="Orientation" Value="Horizontal" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="Value" Value="0" />
        <Setter Property="IsSelectionRangeEnabled" Value="True" />
        <Setter Property="SelectionStart" Value="-50000" />
        <Setter Property="SelectionEnd" Value="50000"/>
        <!--"{Binding Value, RelativeSource={RelativeSource Self}}" />-->
        <Style.Triggers>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Background" Value="{DynamicResource SliderTrackDisabled}" />
                <Setter Property="BorderBrush" Value="{DynamicResource SliderThumbDisabled}" />
                <Setter Property="Foreground" Value="{DynamicResource SliderValueDisabled}" />
            </Trigger>
            <Trigger Property="IsMouseOver" Value="True">
                <!--<Setter Property="Background" Value="{DynamicResource SliderTrackHover}" />-->
                <!--<Setter Property="Foreground" Value="{DynamicResource AccentColorBrush2}" />-->
            </Trigger>
            <Trigger Property="Orientation" Value="Horizontal">
                <Setter Property="Height" Value="12" />
                <Setter Property="MinHeight" Value="12" />
                <Setter Property="Template" Value="{DynamicResource HorizontalSliderCustom}" />
            </Trigger>
            <Trigger Property="Orientation" Value="Vertical">
                <Setter Property="MinWidth" Value="12" />
                <Setter Property="Template" Value="{StaticResource VerticalSlider}" />
                <Setter Property="Width" Value="12" />
            </Trigger>
        </Style.Triggers>
    </Style>

</ResourceDictionary>