kmpdfkit_demo/Demo/Examples/Compdfkit_Tools/Common/BaseControl/CustomSliderControl.xaml

<UserControl x:Class="Compdfkit_Tools.Common.CustomSliderControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:Compdfkit_Tools.Common"
             mc:Ignorable="d" 
              d:DesignHeight="40" d:DesignWidth="400">
    <UserControl.Resources>
        <DropShadowEffect x:Key="UnhoverThumbEffect" BlurRadius="5" ShadowDepth="0" Opacity="0.3" Color="RoyalBlue"/>
        <DropShadowEffect x:Key="HoverThumbEffect" BlurRadius="5" ShadowDepth="0" Opacity="0.5" Color="RoyalBlue"/>
        <DropShadowEffect x:Key="DragThumbEffect" BlurRadius="8" ShadowDepth="0" Opacity="1" Color="RoyalBlue"/>

        <Style x:Key="BaseSliderStyle" TargetType="Slider">
            <Setter Property="Width" Value="200"/>
            <Setter Property="Margin" Value="0"/>
            <Setter Property="Maximum" Value="{Binding Maxium, Mode=OneWay}"/>
            <Setter Property="IsSnapToTickEnabled" Value="True"/>
            <Setter Property="IsMoveToPointEnabled" Value="True"></Setter>
            <Setter Property="LargeChange" Value="10"></Setter>
            <Setter Property="SmallChange" Value="1"></Setter>
            <Setter Property="Background" Value="LightGray"></Setter>
            <Setter Property="Foreground" Value="RoyalBlue"></Setter>
            <Setter Property="SnapsToDevicePixels" Value="True"/>
        </Style>

        <Style x:Key="DefaultLeftRepeatButtonStyle" TargetType="RepeatButton">
            <Setter Property="IsTabStop" Value="False"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RepeatButton">
                        <Border Background="RoyalBlue" Height="4"></Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="DefaultRightRepeatButtonStyle" TargetType="RepeatButton">
            <Setter Property="IsTabStop" Value="False"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RepeatButton">
                        <Border Background="Transparent" Height="4"></Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="DefaultSliderThumbStyle" TargetType="Thumb">
            <Setter Property="Width" Value="15"></Setter>
            <Setter Property="Height" Value="15"></Setter>
            <Setter Property="Background" Value="#CDCDCD"></Setter>
            <Setter Property="SnapsToDevicePixels" Value="True"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Thumb">
                        <Ellipse Width="{TemplateBinding Width}"
                                 Height="{TemplateBinding Height}"
                                 Fill="{TemplateBinding Background}"
                                 Effect="{StaticResource UnhoverThumbEffect}">
                        </Ellipse>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Effect" Value="{StaticResource HoverThumbEffect}"></Setter>
                                <Setter Property="Cursor" Value="Hand"></Setter>
                            </Trigger>
                            <Trigger Property="IsDragging" Value="True">
                                <Setter Property="Effect" Value="{StaticResource DragThumbEffect}"></Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="SlideStyle" TargetType="{x:Type Slider}" BasedOn="{StaticResource BaseSliderStyle}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Slider}">
                        <Grid Width="{TemplateBinding Width}">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto"></RowDefinition>
                                <RowDefinition MinHeight="{TemplateBinding Height}" Height="auto"></RowDefinition>
                                <RowDefinition Height="auto"></RowDefinition>
                            </Grid.RowDefinitions>
                            <TickBar x:Name="TopTick" Placement="Top" Height="4" Visibility="Collapsed" Fill="{TemplateBinding Foreground}"></TickBar>
                            <Border Name="TrackBackground" 
                            Grid.Row="1"
                            Height="4"
                            Background="{TemplateBinding Background}"/>
                            <Track Name="PART_Track" Grid.Row="1">
                                <Track.DecreaseRepeatButton>
                                    <RepeatButton Style="{StaticResource DefaultLeftRepeatButtonStyle }" Command="Slider.DecreaseLarge"></RepeatButton>
                                </Track.DecreaseRepeatButton>
                                <Track.Thumb>
                                    <Thumb Style="{StaticResource DefaultSliderThumbStyle}"></Thumb>
                                </Track.Thumb>
                                <Track.IncreaseRepeatButton>
                                    <RepeatButton Style="{StaticResource DefaultRightRepeatButtonStyle}" Command="Slider.IncreaseLarge"></RepeatButton>
                                </Track.IncreaseRepeatButton>
                            </Track>
                            <TickBar x:Name="BottomTick" Grid.Row="2" Placement="Bottom" Height="4" Visibility="Collapsed" Fill="Red"></TickBar>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="TickPlacement" Value="Both">
                                <Setter TargetName="TopTick" Property="Visibility" Value="Visible"></Setter>
                                <Setter TargetName="BottomTick" Property="Visibility" Value="Visible"></Setter>
                            </Trigger>
                            <Trigger Property="TickPlacement" Value="BottomRight">
                                <Setter TargetName="BottomTick" Property="Visibility" Value="Visible"></Setter>
                            </Trigger>
                            <Trigger Property="TickPlacement" Value="TopLeft">
                                <Setter Property="Visibility" Value="Visible"></Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <Grid>
        <Slider Name="slider" Value="{Binding SliderValue, Mode=TwoWay}" Style="{StaticResource SlideStyle}" TickPlacement="Both" Width="{Binding SliderWidth, Mode=OneWay}"></Slider>
    </Grid>
</UserControl>