Tooltip in Blazor Range Slider Component

4 Nov 20251 minute to read

The slider can display a tooltip that shows the current value when interacting with the control. Configure the tooltip position 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

Change the slider value using the ShowButtons property, which renders increment and decrement buttons. In a range slider, button clicks change the first handle by default. To change the other handle, move focus to it and then use the buttons.

NOTE

After enabling slider buttons, pressing the Tab key moves focus to the handle, not the buttons.

@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;
}