ToolTip in WinUI RangeSlider (Range Slider)

14 Jul 20266 minutes to read

This section explains how to add tooltips to the RangeSlider.

IMPORTANT

Refer to the getting started documentation for information on installing the NuGet package, adding namespace references, and adding the SfRangeSlider control to your application.

Show Tooltip

You can enable tooltips for the thumbs using the ShowToolTip property of the RangeSlider. The tooltip is used to indicate the current selection value during interaction. The default value of the ShowToolTip property is true.

<slider:SfRangeSlider RangeStart="30"
                      RangeEnd="70"
                      ShowToolTip="True" />
SfRangeSlider sfRangeSlider = new SfRangeSlider();
sfRangeSlider.RangeStart = 30;
sfRangeSlider.RangeEnd = 70;
sfRangeSlider.ShowToolTip = true;
this.Content = sfRangeSlider;

Range slider with tooltip

Tooltip Options

You can display a tooltip for either the active thumb or both thumbs (RangeStart and RangeEnd) using the ToolTipOption property of the RangeSlider. The default value of the ToolTipOption property is ToolTipOption.BothThumb. The available values are:

<slider:SfRangeSlider RangeStart="30"
                      RangeEnd="70"
                      ToolTipOption="ActiveThumb" />
SfRangeSlider sfRangeSlider = new SfRangeSlider();
sfRangeSlider.RangeStart = 30;
sfRangeSlider.RangeEnd = 70;
sfRangeSlider.ToolTipOption = ToolTipOption.ActiveThumb;
this.Content = sfRangeSlider;

Range slider with tooltip option customization

Tooltip Text Format

The ToolTipFormat property allows you to customize the tooltip text using standard .NET numeric format strings. The default value of the ToolTipFormat property is N2.

NOTE

Refer to standard numeric format strings for the list of supported format specifiers (for example, N, C, P).

<slider:SfRangeSlider RangeStart="30"
                      RangeEnd="70"
                      ShowToolTip="True"
                      ToolTipFormat="c" />
SfRangeSlider sfRangeSlider = new SfRangeSlider();
sfRangeSlider.RangeStart = 30;
sfRangeSlider.RangeEnd = 70;
sfRangeSlider.ShowToolTip = true;
sfRangeSlider.ToolTipFormat = "c";
this.Content = sfRangeSlider;

Range slider with tooltip format customization

Tooltip Style

The ToolTipStyle property allows you to define the style for the range slider tooltip, as shown in the following code example. The default value of the ToolTipStyle property is null.

NOTE

The ToolTipStyle only takes effect when the ShowToolTip property is set to true. The slider: prefix refers to the Syncfusion.UI.Xaml.Sliders namespace.

<Style x:Key="ToolTipStyle"
       TargetType="slider:SliderToolTip">
    <Setter Property="Background"
            Value="#1257eb" />
    <Setter Property="Foreground"
            Value="White" />
</Style>

<slider:SfRangeSlider RangeStart="30"
                      RangeEnd="70"
                      ShowToolTip="True"
                      ToolTipStyle="{StaticResource ToolTipStyle}" />
SfRangeSlider sfRangeSlider = new SfRangeSlider();
sfRangeSlider.RangeStart = 30;
sfRangeSlider.RangeEnd = 70;
sfRangeSlider.ShowToolTip = true;
sfRangeSlider.ToolTipStyle = this.Resources["ToolTipStyle"] as Style;
this.Content = sfRangeSlider;

Range slider with tooltip style

Tooltip Template

The ToolTipTemplate property allows you to define the data template for the range slider tooltip as shown in the following code example.

<DataTemplate x:Key="ToolTipTemplate">
    <StackPanel Orientation="Horizontal">
        <TextBlock Text="{Binding RangeStartValue}" />
        <TextBlock Text=":"
                   Margin="5,0,5,0" />
        <TextBlock Text="{Binding RangeEndValue}" />
    </StackPanel>
</DataTemplate>

<slider:SfRangeSlider RangeStart="30"
                      RangeEnd="70"
                      ShowToolTip="True"
                      ToolTipTemplate="{StaticResource ToolTipTemplate}" />
SfRangeSlider sfRangeSlider = new SfRangeSlider();
sfRangeSlider.RangeStart = 30;
sfRangeSlider.RangeEnd = 70;
sfRangeSlider.ShowToolTip = true;
sfRangeSlider.ToolTipTemplate = this.Resources["ToolTipTemplate"] as DataTemplate;
this.Content = sfRangeSlider;

Range slider with tooltip template

NOTE

The tooltip template’s DataContext is RangeSliderToolTipInfo, which exposes the RangeStartValue and RangeEndValue properties for binding.