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 the display as none.
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.
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
function App() {
let sliderInstance;
let min = new Date(2013, 6, 13, 11).getTime();
let max = new Date(2013, 6, 13, 17).getTime();
let value = new Date(2013, 6, 13, 13).getTime();
let step = 3600000;
let showButtons = true;
// Slider ticks customization
let ticks = { placement: "After", largeStep: 2 * 3600000 };
let tooltip = { placement: "Before", isVisible: true };
function renderingTicksHandler(args) {
let totalMiliSeconds = Number(args.value);
let custom = { hour: "2-digit", minute: "2-digit" };
args.text = new Date(totalMiliSeconds).toLocaleTimeString("en-us", custom);
}
function tooltipChangeHandler(args) {
let totalMiliSeconds = Number(args.text);
let custom = { hour: "2-digit", minute: "2-digit" };
args.text = new Date(totalMiliSeconds).toLocaleTimeString("en-us", custom);
}
function onClick() {
const slider = document.getElementById("case");
if (slider) {
slider.style.display = "block";
sliderInstance.refresh();
}
}
return (<div id="container">
<button onClick={onClick.bind(this)}>Button</button>
<div id="case" className="wrap">
<SliderComponent ref={t => (sliderInstance = t)} min={min} max={max} value={value} step={step} tooltip={tooltip} ticks={ticks} showButtons={true} tooltipChange={tooltipChangeHandler.bind(this)} renderingTicks={renderingTicksHandler.bind(this)}/>
</div>
</div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React ListView</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='element'>
</div>
</body>
</html>.sliderwrap {
margin-top: 20px;
}
#case{
display: none;
width: 50%;
margin: 0 auto;
}
.sliderwrap label {
font-size: 13px;
font-weight: 100;
margin-top: 15px;
padding-bottom: 15px;
}
.wrap {
box-sizing: border-box;
height: 100px;
margin: 0 auto;
padding: 30px 10px;
width: 460px;
}
.wrap .label {
text-align: center;
}
.labeltext {
text-align: center;
}import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent, TicksDataModel, TooltipDataModel, SliderTickEventArgs, SliderTooltipEventArgs } from '@syncfusion/ej2-react-inputs';
function App() {
let sliderInstance: SliderComponent;
let min = new Date(2013, 6, 13, 11).getTime();
let max = new Date(2013, 6, 13, 17).getTime();
let value = new Date(2013, 6, 13, 13).getTime();
let step = 3600000;
let showButtons = true;
// Slider ticks customization
let ticks: TicksDataModel = { placement: "After", largeStep: 2 * 3600000 };
let tooltip: TooltipDataModel = { placement: "Before", isVisible: true };
function renderingTicksHandler(args: SliderTickEventArgs) {
let totalMiliSeconds = Number(args.value);
let custom = { hour: "2-digit", minute: "2-digit" };
args.text = new Date(totalMiliSeconds).toLocaleTimeString("en-us", custom);
}
function tooltipChangeHandler(args: SliderTooltipEventArgs) {
let totalMiliSeconds = Number(args.text);
let custom = { hour: "2-digit", minute: "2-digit" };
args.text = new Date(totalMiliSeconds).toLocaleTimeString("en-us", custom);
}
function onClick(){
const slider = document.getElementById("case");
if(slider){
slider.style.display = "block";
sliderInstance.refresh();
}
}
return (
<div id="container">
<button onClick={onClick.bind(this)}>Button</button>
<div id="case" className="wrap">
<SliderComponent
ref={t=>(sliderInstance = t as SliderComponent)}
min={min}
max={max}
value={value}
step={step}
tooltip={tooltip}
ticks={ticks}
showButtons={true}
tooltipChange={tooltipChangeHandler.bind(this) as any}
renderingTicks={renderingTicksHandler.bind(this) as any}
/>
</div>
</div>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));