Thumb ToolTip in UWP Range Slider (SfRangeSlider)

10 May 20212 minutes to read

The Thumb tooltip shows the current value on which the Thumb stands.

Thumb ToolTip Precision

ThumbToolTipPrecision property is used to define the precision of the value displayed in the tooltip.

XAML

<editors:SfRangeSlider x:Name="rangeSlider" Width="200" VerticalAlignment="Center" Minimum="0" Maximum="100" Value="50" ThumbToolTipPrecision="2"/>

C#

rangeSlider.ThumbToolTipPrecision = 2;

VB.NET

rangeSlider.ThumbToolTipPrecision = 2

Thumb ToolTip Position

The position of the Thumb tooltip in relation to the Thumb can be controlled by the ThumbToolTipPlacement property. It has the following options.

1. BottomRight
2. TopLeft
3. None

BottomRight

Tooltip placed either below the Thumb in horizontal orientation or right of the Thumb in vertical orientation.

XAML

<editors:SfRangeSlider x:Name="rangeSlider" Width="200" Minimum="0" Maximum="100" Value="50" ThumbToolTipPlacement="BottomRight" />

C#

rangeSlider.ThumbToolTipPlacement = Syncfusion.UI.Xaml.Controls.Input.ThumbToolTipPlacement.BottomRight;

VB.NET

rangeSlider.ThumbToolTipPlacement = Syncfusion.UI.Xaml.Controls.Input.ThumbToolTipPlacement.BottomRight

NOTE

This option will show tooltip to right in vertical orientation.

TopLeft

Tooltip placed either above the Thumb in horizontal orientation or left of the Thumb in vertical orientation.

XAML

<editors:SfRangeSlider x:Name="rangeSlider" Width="200" Minimum="0" Maximum="100" Value="50" ThumbToolTipPlacement="TopLeft" />

C#

rangeSlider.ThumbToolTipPlacement = Syncfusion.UI.Xaml.Controls.Input.ThumbToolTipPlacement.TopLeft;

VB.NET

rangeSlider.ThumbToolTipPlacement = Syncfusion.UI.Xaml.Controls.Input.ThumbToolTipPlacement.TopLeft

NOTE

This option will show tooltip to left in vertical orientation.

None

Tooltip will not appear.