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

Overview

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

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

ThumbStyle

The ThumbStyle property allows you to control the appearance of the thumb, which is used to control the Value.

If you are using the implicit styles theming approach, base the custom style on the default RadTickBarStyle using the BasedOn property.

Creating a custom style for the ThumbStyle property when using implicit styles theming approach

<Grid> 
    <Grid.Resources> 
        <Style x:Key="CustomThumbStyle" 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 CustomThumbStyle}"> 
        <telerik:RadSlider.TickTemplate> 
            <DataTemplate> 
                <TextBlock Text="{Binding}" /> 
            </DataTemplate> 
        </telerik:RadSlider.TickTemplate> 
    </telerik:RadSlider> 
</Grid> 

If you are using the StyleManager theming approach, merge the generic resource dictionary for the used theme. This resource dictionary is contained in the Telerik.Windows.Controls assembly. Then, base the custom style on the default TrackStyle using the BasedOn property. In the following example, the GenericFluent.xaml dictionary of the Telerik.Windows.Controls assembly is merged, because the Fluent theme is used.

Creating a custom style for the ThumbStyle property when using StyleManager theming approach

<Grid> 
    <Grid.Resources> 
        <ResourceDictionary> 
            <ResourceDictionary.MergedDictionaries> 
                <ResourceDictionary Source="/Telerik.Windows.Controls;component/Themes/GenericFluent.xaml"/> 
            </ResourceDictionary.MergedDictionaries> 
            <Style x:Key="CustomThumbStyle" TargetType="Thumb" BasedOn="{StaticResource ThumbStyle}"> 
                <Setter Property="Width" Value="25" /> 
            </Style> 
        </ResourceDictionary> 
 
    </Grid.Resources> 
    <telerik:RadSlider Minimum="0"  
                       Maximum="100"  
                       TickFrequency="10" 
                       TickPlacement="BottomRight" 
                       ThumbStyle="{StaticResource CustomThumbStyle}"> 
        <telerik:RadSlider.TickTemplate> 
            <DataTemplate> 
                <TextBlock Text="{Binding}" /> 
            </DataTemplate> 
        </telerik:RadSlider.TickTemplate> 
    </telerik:RadSlider> 
</Grid> 

If another theme is used, for example, Office_Black, change the GenericFluent.xaml to GenericOfficeBlack.xaml.

RadSlider with custom ThumbStyle

RadSlider with custom ThumbStyle

SelectionMiddleThumbStyle

The SelectionMiddleThumbStyle property lets you control the appearance of the middle thumb, which is displayed when the IsSelectionRangeEnabled property is True.

If you are using the implicit styles theming approach, base the custom style on the default SelectionMiddleThumbStyle using the BasedOn property.

Creating a custom style for the SelectionMiddleThumbStyle property using the implicit styles theming approach

<Grid> 
    <Grid.Resources> 
        <Style x:Key="CustomSelectionMiddleThumbStyle" 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 CustomSelectionMiddleThumbStyle}"> 
        <telerik:RadSlider.TickTemplate> 
            <DataTemplate> 
                <TextBlock Text="{Binding}" /> 
            </DataTemplate> 
        </telerik:RadSlider.TickTemplate> 
    </telerik:RadSlider> 
</Grid> 

If you are using the StyleManager theming approach, merge the generic resource dictionary for the used theme. This resource dictionary is contained in the Telerik.Windows.Controls assembly. Then, base the custom style on the default SelectionMiddleThumbStyle using the BasedOn property. In the following example, the GenericFluent.xaml dictionary of the Telerik.Windows.Controls assembly is merged, because the Fluent theme is used.

Creating a custom style for the SelectionMiddleThumbStyle property using the StyleManager theming approach

<Grid> 
    <Grid.Resources> 
        <ResourceDictionary> 
            <ResourceDictionary.MergedDictionaries> 
                <ResourceDictionary Source="/Telerik.Windows.Controls;component/Themes/GenericFluent.xaml"/> 
            </ResourceDictionary.MergedDictionaries> 
            <Style x:Key="CustomSelectionMiddleThumbStyle" TargetType="Thumb" BasedOn="{StaticResource SelectionMiddleThumbStyle}"> 
                <Setter Property="Height" Value="10" /> 
            </Style> 
        </ResourceDictionary>   
    </Grid.Resources> 
    <telerik:RadSlider Minimum="0"  
                       Maximum="100"  
                       TickFrequency="10" 
                       IsSelectionRangeEnabled="True" 
                       VerticalAlignment="Center" 
                       TickPlacement="BottomRight" 
                       SelectionMiddleThumbStyle="{StaticResource CustomSelectionMiddleThumbStyle}"> 
        <telerik:RadSlider.TickTemplate> 
            <DataTemplate> 
                <TextBlock Text="{Binding}" /> 
            </DataTemplate> 
        </telerik:RadSlider.TickTemplate> 
    </telerik:RadSlider> 
</Grid> 

If another theme is used, for example, Office_Black, change the GenericFluent.xaml to GenericOfficeBlack.xaml.

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.

If you are using the implicit styles theming approach, base the custom styles on the default DecreaseHandleStyle and IncreaseHandleStyle styles using the BasedOn property.

Creating custom Styles for the DecreaseHandleStyle and IncreaseHandleStyle properties when using the implicit styles theming approach

<Grid> 
    <Grid.Resources>  
        <Style x:Key="CustomDecreaseHandleStyle" TargetType="RepeatButton" BasedOn="{StaticResource DecreaseHandleStyle}"> 
            <Setter Property="Foreground" Value="Red" /> 
        </Style> 
        <Style x:Key="CustomIncreaseHandleStyle" 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 CustomDecreaseHandleStyle}" 
                       IncreaseHandleStyle="{StaticResource CustomIncreaseHandleStyle}"> 
        <telerik:RadSlider.TickTemplate> 
            <DataTemplate> 
                <TextBlock Text="{Binding}" /> 
            </DataTemplate> 
        </telerik:RadSlider.TickTemplate> 
    </telerik:RadSlider> 
</Grid> 

If you are using the StyleManager theming approach, merge the generic resource dictionary for the used theme. This resource dictionary is contained in the Telerik.Windows.Controls assembly. Then, base the custom styles on the default DecreaseHandleStyle and IncreaseHandleStyle styles using the BasedOn property. In the following example, the GenericFluent.xaml dictionary of the Telerik.Windows.Controls assembly is merged, because the Fluent theme is used.

Creating custom Styles for the DecreaseHandleStyle and IncreaseHandleStyle properties when using the StyleManager theming approach

<Grid> 
    <Grid.Resources> 
        <ResourceDictionary> 
            <ResourceDictionary.MergedDictionaries> 
                <ResourceDictionary Source="/Telerik.Windows.Controls;component/Themes/GenericFluent.xaml"/> 
            </ResourceDictionary.MergedDictionaries> 
            <Style x:Key="CustomDecreaseHandleStyle" TargetType="RepeatButton" BasedOn="{StaticResource DecreaseHandleStyle}"> 
                <Setter Property="Foreground" Value="Red" /> 
            </Style> 
            <Style x:Key="CustomIncreaseHandleStyle" TargetType="RepeatButton" BasedOn="{StaticResource IncreaseHandleStyle}"> 
                <Setter Property="Foreground" Value="Red" /> 
            </Style> 
        </ResourceDictionary> 
    </Grid.Resources> 
    <telerik:RadSlider Minimum="0"  
                       Maximum="100"  
                       TickFrequency="10" 
                       TickPlacement="BottomRight"  
                       Margin="5" 
                       HandlesVisibility="Visible" 
                       DecreaseHandleStyle="{StaticResource CustomDecreaseHandleStyle}" 
                       IncreaseHandleStyle="{StaticResource CustomIncreaseHandleStyle}"> 
        <telerik:RadSlider.TickTemplate> 
            <DataTemplate> 
                <TextBlock Text="{Binding}" /> 
            </DataTemplate> 
        </telerik:RadSlider.TickTemplate> 
    </telerik:RadSlider> 
</Grid> 

If another theme is used, for example, Office_Black, change the GenericFluent.xaml to GenericOfficeBlack.xaml.

RadSlider with custom DecreaseHandleStyle and IncreaseHandleStyle

RadSlider with custom DecreaseHandleStyle and IncreaseHandleStyle

TickBarStyle

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

If you are using the implicit styles theming approach, base the custom style on the default RadTickBarStyle using the BasedOn property as shown in the following example:

Creating a custom style for the TickBarStyle property when using the implicit styles theming approach

<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> 

If you are using the StyleManager theming approach, set the ItemsPanel property of the RadTickBar element to a new instance of the TickBarPanel object.

Creating a custom style for the TickBarStyle property when using the StyleManager theming approach

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

RadSlider with custom TickBarStyle

RadSlider with custom TickBarStyle

TrackStyle

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

When using the implicit styles theming approach and NoXaml binaries, base the custom style on the default TrackStyle. This style comes from the chosen theme using the BasedOn property.

Creating a custom style for the TrackStyle property when using the implicit styles theming approach

<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> 

When using the StyleManager and Xaml binaries, merge the resource dictionary for the used theme. This resource dictionary is contained in the Telerik.Windows.Controls assembly. Then, base the custom style on the default TrackStyle using the BasedOn property. In the following example, the GenericFluent.xaml dictionary of the Telerik.Windows.Controls assembly is merged, because the Fluent theme is used.

Creating a custom style for the TrackStyle property when using the StyleManager theming approach

<Grid> 
    <Grid.Resources> 
        <ResourceDictionary> 
            <ResourceDictionary.MergedDictionaries> 
                <ResourceDictionary Source="/Telerik.Windows.Controls;component/Themes/GenericFluent.xaml"/> 
            </ResourceDictionary.MergedDictionaries> 
            <Style x:Key="CustomTrackStyle" TargetType="ContentControl" BasedOn="{StaticResource TrackStyle}"> 
                <Setter Property="Height" Value="25" /> 
            </Style> 
        </ResourceDictionary> 
    </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> 

If another theme is used, for example, Office_Black, change the GenericFluent.xaml to GenericOfficeBlack.xaml.

RadSlider with custom TrackStyle

RadSlider with custom TrackStyle

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