Search results

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

04 Aug 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.

razor
hidden-slider.cs
Copied to clipboard
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Inputs
	@Html.EJS().Button("element").Content("Button").Render()
	<div id='container' style="margin-top:150px;">
		@Html.EJS().Slider("default").Min(1373693400000).Max(1373715000000).Step(3600000).RenderingTicks("renderingTicksHandler").TooltipChange("tooltipChangeHandler").Tooltip(new SliderTooltipData { Placement = TooltipPlacement.Before, IsVisible = true }).Ticks(new SliderTicksData { Placement = Placement.After, LargeStep = 7200000 }).ShowButtons(true).Render()
	</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('element').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