Overview

RadSlider allows you to easily modify its appearance by providing some useful properties.

The pictures in this article demonstrate the RadSlider in the Office2016 theme.

ThumbStyle

Via the ThumbStyle property you can control the appearance of the thumb which is used to control the Value.

Example 1: Specify ThumbStyle

<Grid> 
    <Grid.Resources> 
        <Style x:Key="ThumbStyle" TargetType="Thumb" BasedOn="{StaticResource ThumbStyle}"> 
            <Setter Property="Width" Value="25" /> 
        </Style> 
    </Grid.Resources> 
    <telerik:RadSlider Minimum="0"  
                       Maximum="100"  
                       TickFrequency="10" 
                       TickPlacement="BottomRight"  
                       ThumbStyle="{StaticResource ThumbStyle}"> 
        <telerik:RadSlider.TickTemplate> 
            <DataTemplate> 
                <TextBlock Text="{Binding}" /> 
            </DataTemplate> 
        </telerik:RadSlider.TickTemplate> 
    </telerik:RadSlider> 
</Grid> 

Figure 1: RadSlider with custom ThumbStyle

RadSlider with custom ThumbStyle

SelectionMiddleThumbStyle

Via the SelectionMiddleThumbStyle property you can control the appearance of the middle thumb which is displayed when the IsSelectionRangeEnabled property is True.

Example 2: Specify SelectionMiddleThumbStyle

<Grid> 
    <Grid.Resources> 
        <Style x:Key="SelectionMiddleThumbStyle" TargetType="Thumb" BasedOn="{StaticResource SelectionMiddleThumbStyle}"> 
            <Setter Property="Height" Value="10" /> 
        </Style> 
    </Grid.Resources> 
    <telerik:RadSlider Minimum="0"  
                       Maximum="100"  
                       TickFrequency="10" 
                       TickPlacement="BottomRight"  
                       IsSelectionRangeEnabled="True" 
                       Margin="5" 
                       SelectionMiddleThumbStyle="{StaticResource SelectionMiddleThumbStyle}"> 
        <telerik:RadSlider.TickTemplate> 
            <DataTemplate> 
                <TextBlock Text="{Binding}" /> 
            </DataTemplate> 
        </telerik:RadSlider.TickTemplate> 
    </telerik:RadSlider> 
</Grid> 

Figure 2: RadSlider with custom SelectionMiddleThumbStyle

RadSlider with custom SelectionMiddleThumbStyle

DecreaseHandleStyle and IncreaseHandleStyle

The DecreaseHandleStyle and IncreaseHandleStyle properties allow you to modify the appearance of the two repeat buttons which increase and decrease the Value. They are shown when the HandlesVisibility is True.

Example 3: Set DecreaseHandleStyle and IncreaseHandleStyle

<Grid> 
    <Grid.Resources> 
        <Style x:Key="DecreaseHandleStyle" TargetType="RepeatButton" BasedOn="{StaticResource DecreaseHandleStyle}"> 
            <Setter Property="Foreground" Value="Red" /> 
        </Style> 
        <Style x:Key="IncreaseHandleStyle" TargetType="RepeatButton" BasedOn="{StaticResource IncreaseHandleStyle}"> 
            <Setter Property="Foreground" Value="Red" /> 
        </Style> 
    </Grid.Resources> 
    <telerik:RadSlider Minimum="0"  
                       Maximum="100"  
                       TickFrequency="10" 
                       TickPlacement="BottomRight"  
                       Margin="5" 
                       HandlesVisibility="Visible" 
                       DecreaseHandleStyle="{StaticResource DecreaseHandleStyle}" 
                       IncreaseHandleStyle="{StaticResource IncreaseHandleStyle}"> 
        <telerik:RadSlider.TickTemplate> 
            <DataTemplate> 
                <TextBlock Text="{Binding}" /> 
            </DataTemplate> 
        </telerik:RadSlider.TickTemplate> 
    </telerik:RadSlider> 
</Grid> 

Figure 3: RadSlider with custom DecreaseHandleStyle and IncreaseHandleStyle

RadSlider with custom DecreaseHandleStyle and IncreaseHandleStyle

TickBackStyle

The TickBarStyle property allows you to modify the appearance of the bottom and top tickbars - the controls which displays the ticks.

Example 4: Set TickBarStyle

<Grid> 
    <Grid.Resources> 
        <Style x:Key="TickBarStyle" TargetType="telerik:RadTickBar" BasedOn="{StaticResource RadTickBarStyle}"> 
            <Setter Property="Foreground" Value="Red" /> 
        </Style> 
    </Grid.Resources> 
    <telerik:RadSlider Minimum="0"  
                       Maximum="100"  
                       TickFrequency="10" 
                       TickPlacement="BottomRight"  
                       Margin="10" 
                       TickBarStyle="{StaticResource TickBarStyle}"> 
        <telerik:RadSlider.TickTemplate> 
            <DataTemplate> 
                <TextBlock Text="{Binding}" /> 
            </DataTemplate> 
        </telerik:RadSlider.TickTemplate> 
    </telerik:RadSlider> 
</Grid> 

Figure 4: RadSlider with custom TickBarStyle

RadSlider with custom TickBarStyle

TrackStyle

The TrackStyle property lets you modify the appearance of the RadSlider track.

Example 5: Set TrackStyle

<Grid> 
    <Grid.Resources> 
        <Style x:Key="CustomTrackStyle" TargetType="ContentControl" BasedOn="{StaticResource TrackStyle}"> 
            <Setter Property="Height" Value="25" /> 
        </Style> 
    </Grid.Resources> 
    <telerik:RadSlider Minimum="0"  
                       Maximum="100"  
                       TickFrequency="10" 
                       TickPlacement="BottomRight"  
                       Margin="10" 
                       TrackStyle="{StaticResource CustomTrackStyle}"> 
        <telerik:RadSlider.TickTemplate> 
            <DataTemplate> 
                <TextBlock Text="{Binding}" /> 
            </DataTemplate> 
        </telerik:RadSlider.TickTemplate> 
    </telerik:RadSlider> 
</Grid> 

Figure 5: RadSlider with custom TrackStyle

RadSlider with custom TrackStyle

The styles in the examples are based on the default styles for the theme. This is the correct approach when the implicit styling approach is used. If the StyleManager theming mechanism is chosen there is no need to base the custom styles on the default one.

In order to learn how to further modify any of the elements referenced in the article by extracting their control template, read the Editing Control Templates article.

In this article
Not finding the help you need? Improve this article