Search results

Show Slider From Hidden State in ASP.NET Core Range Slider control

22 Jul 2021 / 1 minute to read

This section demonstrates how-to render the Slider component in hidden state and make it visible in button click. We can initialize Slider in hidden state by setting display as none to it.

In the sample, by clicking on the button, we can make the Slider visible from hidden state, and we must also call the refresh method of the Slider to render it properly based on its original dimensions.

tagHelper
hidden-slider.cs
Copied to clipboard
<!--button to show slider-->
<ejs-button id="button" content="Show Slider"></ejs-button>

<div id="container">
    <ejs-slider id="default" step="3600000" min="1373693400000" max="1373715000000" showButtons="true" tooltipChange="tooltipChangeHandler" renderingTicks="renderingTicksHandler">
        <e-slider-tooltipdata isVisible="true" placement="Before"> </e-slider-tooltipdata>
        <e-slider-ticksdata placement="After" largeStep="7200000" renderingTicks="renderingTicksHandler"></e-slider-ticksdata>
    </ejs-slider>
</div>

<script type="text/javascript">
    function tooltipChangeHandler(args) {
        var totalMilliSeconds = Number(args.text);
        var custom = { hour: '2-digit', minute: '2-digit' };
        args.text = new Date(totalMilliSeconds).toLocaleTimeString("en-us", custom);
    }
    function renderingTicksHandler(args) {
        var totalMilliSeconds = Number(args.value);
        var custom = { hour: '2-digit', minute: '2-digit' };
        args.text = new Date(totalMilliSeconds).toLocaleTimeString("en-us", custom);
    }
    document.getElementById('button').onclick = function () {
	//slider visible from hidden state
        slider = document.getElementById("container");
        ticks = document.getElementById("default");
        slider.style.display = "block";
        ticks.ej2_instances[0].refresh();
    };
</script>
<style>
/* render slider in hidden state */
    #container{
        display: none;
    }
</style>
Copied to clipboard
public ActionResult HiddenSlider()
{
    return View();
}

ASP .NET Core - Slider - Hidden - Slider