Tooltip

21 Dec 20221 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.

CSHTML

@using Syncfusion.EJ2
@using Syncfusion.EJ2.Inputs
     @Html.EJS().Slider("default").Type(SliderType.MinRange).Value("30").Tooltip(new SliderTooltipData { IsVisible = true, ShowOn = TooltipShowOn.Always, Placement = TooltipPlacement.After }).Render()

HomeController.cs

public IActionResult Index()
    {
        return View();
    }

Buttons

The Slider value can be changed by using the Increase and Decrease buttons. In Range Slider, by default the first handle value will be changed while clicking the button. Change the handle focus and press the button to change the last focused handle value.

NOTE

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

CSHTML

@using Syncfusion.EJ2
@using Syncfusion.EJ2.Inputs
     @Html.EJS().Slider("default").ShowButtons(true).Type(SliderType.MinRange).Value("30").Tooltip(new SliderTooltipData { IsVisible = true, ShowOn = TooltipShowOn.Always, Placement = TooltipPlacement.After }).Render()

HomeController.cs

public IActionResult Index()
    {
        return View();
    }