.NET MAUI Slider & Range Slider: Tooltips

May 07, 2024
2 minutes to read

The tooltip visualizes the selected value. To change the current value, move the thumb along the scale.

The following example changes tooltip appearance in DXSlider and DXRangeSlider controls:

XAML

xml

<dxe:DXSlider 
    TooltipDisplayFormat="C" 
    Value="48">
    <dxe:DXSlider.TooltipAppearance>
        <dxe:DXSliderTooltipAppearance 
            BackgroundColor="Orange" 
            CornerRadius="15"
            MinHeight="25"
            MinWidth="25"
            TextColor="White"
            FontFamily="Arial"
            FontSize="18"
            FontAttributes="Italic"
            Padding="20"
            Indent="15" />
    </dxe:DXSlider.TooltipAppearance>
</dxe:DXSlider>

<dxe:DXRangeSlider
    StartTooltipDisplayFormat="N1" 
    EndTooltipDisplayFormat="N1"  
    StartValue="15" 
    EndValue="85">
    <dxe:DXRangeSlider.StartTooltipAppearance>
        <dxe:DXSliderTooltipAppearance 
            BackgroundColor="orange" 
            CornerRadius="15"
            MinHeight="25"
            MinWidth="25"
            TextColor="White"
            FontFamily="Arial"
            FontSize="18"
            FontAttributes="Italic"
            Padding="20"
            Indent="15" />
    </dxe:DXRangeSlider.StartTooltipAppearance> 

    <dxe:DXRangeSlider.EndTooltipAppearance>
        <dxe:DXSliderTooltipAppearance ... />
    </dxe:DXRangeSlider.EndTooltipAppearance> 
</dxe:DXRangeSlider>

Use the following properties to change tooltip appearance in DXSlider and DXRangeSlider controls:

DXSliderTooltipAppearance.BackgroundColorGets or sets the tooltip background color. This is a bindable property.DXSliderTooltipAppearance.CornerRadiusGets or sets the corner radius of the tooltip. This is a bindable property.DXSliderTooltipAppearance.MinHeightGets or sets the minimum height of the tooltip. This is a bindable property.DXSliderTooltipAppearance.MinWidthGets or sets the minimum width of the tooltip. This is a bindable property.DXSliderTooltipAppearance.TextColorGets or sets the tooltip text color. This is a bindable property.DXSliderTooltipAppearance.FontFamilyGets or sets the tooltip text font name. This is a bindable property.DXSliderTooltipAppearance.FontSizeGets or sets the tooltip text font size. This is a bindable property.DXSliderTooltipAppearance.FontAttributesGets or sets whether the tooltip text is bold or italic. This is a bindable property.DXSliderTooltipAppearance.PaddingGets or sets the tooltip padding. This is a bindable property.DXSliderTooltipAppearance.IndentGets or sets the distance between the tooltip and thumb. This is a bindable property.DXSlider.TooltipDisplayFormatGets or sets the pattern used to format the tooltip content. This is a bindable property.DXRangeSlider.StartTooltipDisplayFormatGets or sets the pattern used to format the start tooltip content. This is a bindable property.DXRangeSlider.EndTooltipDisplayFormatGets or sets the pattern used to format the end tooltip content. This is a bindable property.