New to Telerik UI for WPF? Download free 30-day trial

Slider Middle Thumb Is not Displayed as Expected when Setting a Custom Style

Environment

Product Version 2020.3.916
Product RadSlider for WPF

Description

When creating a custom style for the middle thumb of the RadSlider, it is not displayed correctly.

Solution

The most likely cause for this issue is that you're using the StyleManager theming approach. In this case to change the style of the middle thumb you need to override the default Thumb style and template. You also need to set an appropriate Height for it, depending on the theme you're using.

The example below includes the optimal Height values for each of the themes provided by the Telerik UI for WPF suite.

<Style x:Key="CustomSelectionMiddleThumbStyle" TargetType="Thumb"> 
    <!--Office2013, VisualStudio2013, ExpressionDark, VisualStudio2019--> 
    <Setter Property="Height" Value="6" /> 
    <!--Windows8, Crystal --> 
    <Setter Property="Height" Value="3" /> 
    <!--Windows8Touch--> 
    <Setter Property="Height" Value="9" /> 
    <!--Office_Black, Office_Blue, Office_Silver, Summer, Vista,Green--> 
    <Setter Property="Height" Value="4" /> 
    <!--Transparent--> 
    <Setter Property="Height" Value="5" /> 
    <!--Fluent, Material, Office2016, Office2019--> 
    <Setter Property="Height" Value="2" /> 
    <!--Office2016Touch--> 
    <Setter Property="Height" Value="10" /> 
 
    <!-- Desired Background and BorderBrush --> 
    <Setter Property="Background" Value="Blue" /> 
    <Setter Property="BorderBrush" Value="Red" /> 
    <Setter Property="Template"> 
        <Setter.Value> 
            <ControlTemplate TargetType="Thumb"> 
                <Grid> 
                    <Border x:Name="BorderVisual" 
                            BorderBrush="{TemplateBinding BorderBrush}" 
                            BorderThickness="{TemplateBinding BorderThickness}" 
                            Background="{TemplateBinding Background}" /> 
                </Grid> 
            </ControlTemplate> 
        </Setter.Value> 
    </Setter> 
</Style> 
 
<Style TargetType="telerik:RadSlider"> 
    <Setter Property="SelectionMiddleThumbStyle" Value="{StaticResource CustomSelectionMiddleThumbStyle}" /> 
</Style> 

See Also

In this article