Show slider from hidden state in EJ2 JavaScript Range Slider control

23 Jan 20257 minutes to read

This section demonstrates how to render the Range Slider control in a hidden state and make it visible upon a button click. You can initialize the Range Slider in a hidden state by setting the display property to none.

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

// Initialize button component
var button = new ej.buttons.Button({ content: 'Button' });
button.appendTo('#element');
// Initialize Range Slider Control
var defaultObj = new ej.inputs.Slider({
	// Set slider minimum and maximum values
	// new Date(Year, Month, day, hours, minutes, seconds, millSeconds)
	min: new Date(2013, 6, 13, 11).getTime(), max: new Date(2013, 6, 13, 17).getTime(),
	// 3600000 milliseconds = 1 Hour
	step: 3600000,
	//Set buttons for slider 
	showButtons: true,
	// Set the initial range values for slider
	value: new Date(2013, 6, 13, 13).getTime(),
	// Bind Tooltip change event for custom formatting
	tooltipChange: tooltipChangeHandler,
	// Initialize tooltip with placement
	tooltip: {
		placement: 'Before', isVisible: true, cssClass: 'e-tooltip-cutomization'
	},
	// Bind ticks event for custom formatting
	renderingTicks: renderingTicksHandler,
	// Initialize ticks with placement, largeStep, smallStep
	ticks: {
		placement: 'After',
		// 2 * 3600000 milliseconds = 2 Hour
		largeStep: 2 * 3600000,
		smallStep: 3600000, showSmallTicks: true
	},
	// Set the type to render range slider
	type: 'MinRange'
});
defaultObj.appendTo('#slider');

function tooltipChangeHandler(args) {
	/**
	  * toLocaleTimeString is predefined javascript date function, which is used to
	  * customize the date in different format
	  */
	var custom = { hour: '2-digit', minute: '2-digit' };
	// Splitting the range values from the tooltip using space into an array.
	if (args.text.indexOf('-') !== -1) {
		var totalMilliSeconds = args.text.split(' ');
		// First part is the first handle value
		var firstPart = totalMilliSeconds[0];
		// Second part is the second handle value
		var secondPart = totalMilliSeconds[2];

		firstPart = new Date(Number(firstPart)).toLocaleTimeString('en-us', custom);
		secondPart = new Date(Number(secondPart)).toLocaleTimeString('en-us', custom);
	} else {
		args.text = new Date(Number(args.text)).toLocaleTimeString('en-us', custom);
	}
}

function renderingTicksHandler(args) {
	var totalMilliSeconds = args.value;
	/**
	 * toLocaleTimeString is predefined javascript date function, which is used to
	 * customize the date in different format
	 */
	var custom = { hour: '2-digit', minute: '2-digit' };
	// Assigning our custom text to the tick value.
	args.text = new Date(totalMilliSeconds).toLocaleTimeString('en-us', custom);
}

//Visible slider by clicking the button
document.getElementById('element').onclick = function () {
	slider = document.getElementById("case");
	ticks = document.getElementById("slider");
	slider.style.display = "block";
	ticks.ej2_instances[0].refresh();
};
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Range Slider</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 Range Slider Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-buttons/styles/material.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <!--button to show slider-->
    <button id="element" style="float:left;">Button</button>
    <div id="container">
        <div class="wrap">
            <div id="case">
                <div id="slider">
                </div>
            </div>
        </div>
    </div>

    <style>
        /* render slider in hidden state */
        #case {
            display: none;
        }

        .wrap {
            box-sizing: border-box;
            height: 260px;
            margin: 0 auto;
            padding: 80px 10px;
            width: 460px;
        }
    </style>
    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}