Tooltip in Blazor Range Slider Component

9 Jan 20251 minute to read

The Slider displays the tooltip to indicate the current value by clicking the Slider bar or drag the Slider handle. The Tooltip position can be customized by using the Placement property. Also decides the tooltip display mode on a page, i.e., on hovering, focusing, or clicking on the Slider handle and it always remains/displays on the page.

@using Syncfusion.Blazor.Inputs

<SfSlider Min="0" Max="100" @bind-Value="@value">
   <SliderTooltip IsVisible="true" ShowOn="TooltipShowOn.Always" Placement="TooltipPlacement.After"></SliderTooltip>
</SfSlider>

@code {
    int value = 30;
}

Buttons

The Slider can be equipped with increase and decrease buttons to change its value. This functionality is enabled by setting the ShowButtons property to true. In a Range Slider, clicking these buttons will, by default, adjust the value of the first handle. To change the value of a different handle, first focus on that handle and then use the buttons.

NOTE

After enabling the slider buttons if the ‘Tab’ key is pressed, the focus goes to the handle and not to the button.

Here’s an example of how to implement buttons in a Slider:

@using Syncfusion.Blazor.Inputs

<SfSlider @bind-Value="@value" ShowButtons="true" >
    <SliderTooltip IsVisible="true" ShowOn="TooltipShowOn.Always" Placement="TooltipPlacement.After"></SliderTooltip>
</SfSlider>

@code {
    int value = 30;
}