Thumb ToolTip in WPF Range Slider (SfRangeSlider)

7 May 202111 minutes to read

The Thumb tooltip displays the current value where the Thumb stands.

ToolTip

Thumb ToolTip Precision

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

<editors:SfRangeSlider
                    Width="300"
                    VerticalAlignment="Center"
                    Maximum="100"
                    Minimum="0"
                    ThumbToolTipPrecision="2"
                    Value="50" />

Precision

NOTE

ThumbToolTipPrecision property is only applicable, if ToolTipFormat value is N.

Thumb ToolTipFormat

The ToolTipFormat property, specifies the format specifier by which to format the ToolTip display value.

<editors:SfRangeSlider
                    Width="300"
                    Maximum="100"
                    Minimum="0"
                    ToolTipFormat="C0"
                    Value="50" />
Grid parentGrid = new Grid();
            SfRangeSlider rangeSlider = new SfRangeSlider()
            {
                Width = 300,
                Maximum = 100,
                Minimum = 0,
                ToolTipFormat= C0,
                Value = 50
            };

            parentGrid.Children.Add(rangeSlider);
            this.Content = parentGrid;

Format

NOTE

Default value of ToolTipFormat is N.

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 is placed either below the Thumb in horizontal orientation or right of the Thumb in vertical orientation.

<editors:SfRangeSlider
                    Width="300"
                    Maximum="100"
                    Minimum="0"
                    ThumbToolTipPlacement="BottomRight"
                    Value="50" />
Grid parentGrid = new Grid();
            SfRangeSlider rangeSlider = new SfRangeSlider()
            {
                Width = 300,
                Maximum = 100,
                Minimum = 0,
                ThumbToolTipPlacement = ThumbToolTipPlacement.BottomRight,
                Value = 50
            };

            parentGrid.Children.Add(rangeSlider);
            this.Content = parentGrid;

BottomRight

NOTE

This option displays the tooltip to right in vertical orientation.

TopLeft

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

<editors:SfRangeSlider
                    Width="300"
                    Maximum="100"
                    Minimum="0"
                    ThumbToolTipPlacement="TopLeft"
                    Value="50" />
Grid parentGrid = new Grid();
            SfRangeSlider rangeSlider = new SfRangeSlider()
            {
                Width = 300,
                Maximum = 100,
                Minimum = 0,
                ThumbToolTipPlacement = ThumbToolTipPlacement.TopLeft,
                Value = 50
            };

            parentGrid.Children.Add(rangeSlider);
            this.Content = parentGrid;

TopLeft

NOTE

This option displays the tooltip to left in vertical orientation.

None

No Tooltip appears.

<editors:SfRangeSlider
                    Width="300"
                    Maximum="100"
                    Minimum="0"
                    ThumbToolTipPlacement="None"
                    Value="50" />
Grid parentGrid = new Grid();
            SfRangeSlider rangeSlider = new SfRangeSlider()
            {
                Width = 300,
                Maximum = 100,
                Minimum = 0,
                ThumbToolTipPlacement = ThumbToolTipPlacement.None,
                Value = 50
            };

            parentGrid.Children.Add(rangeSlider);
            this.Content = parentGrid;

None

ThumbInterval

ThumbInterval is an interval between the two thumbs, the thumbs cannot be moved within this range.

<editors:SfRangeSlider
            Width="300"
            Maximum="100"
            Minimum="0"
            RangeEnd="50"
            RangeStart="20"
            ShowRange="True"
            ThumbInterval="10"
            Value="50" />
Grid parentGrid = new Grid();
            SfRangeSlider rangeSlider = new SfRangeSlider()
            {
                Width = 300,
                Maximum = 100,
                Minimum = 0,
                ShowRange = true,
                RangeStart = 20,
                RangeEnd = 60,
                ThumbInterval = 10,
                Value = 50
            };

            parentGrid.Children.Add(rangeSlider);
            this.Content = parentGrid;

ThumbInterval