Tooltip

30 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.

CSHTML

<ejs-slider id="default" value="30" type="MinRange">
    <e-slider-tooltipdata isVisible="true" showOn="Always" placement="After"></e-slider-tooltipdata>
</ejs-slider>

HomeController.cs

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

Buttons

The Slider value can be changed by using the Increase and Decrease buttons. The showButtons property is set to true to display these 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

<ejs-slider id="default" showButtons="true" value="30" type="MinRange">
</ejs-slider>

HomeController.cs

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