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';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.min = new Date(2013, 6, 13, 11).getTime();
this.max = new Date(2013, 6, 13, 17).getTime();
this.value = new Date(2013, 6, 13, 13).getTime();
this.step = 3600000;
this.showButtons = true;
// Slider ticks customization
this.ticks = { placement: "After", largeStep: 2 * 3600000 };
this.tooltip = { placement: "Before", isVisible: true };
}
renderingTicksHandler(args) {
let totalMiliSeconds = Number(args.value);
let custom = { hour: "2-digit", minute: "2-digit" };
args.text = new Date(totalMiliSeconds).toLocaleTimeString("en-us", custom);
}
tooltipChangeHandler(args) {
let totalMiliSeconds = Number(args.text);
let custom = { hour: "2-digit", minute: "2-digit" };
args.text = new Date(totalMiliSeconds).toLocaleTimeString("en-us", custom);
}
onClick() {
const slider = document.getElementById("case");
if (slider) {
slider.style.display = "block";
this.sliderInstance.refresh();
}
}
render() {
return (<div id="container">
<button onClick={this.onClick.bind(this)}>Button</button>
<div id="case" className="wrap">
<SliderComponent ref={t => (this.sliderInstance = t)} min={this.min} max={this.max} value={this.value} step={this.step} tooltip={this.tooltip} ticks={this.ticks} showButtons={true} tooltipChange={this.tooltipChangeHandler.bind(this)} renderingTicks={this.renderingTicksHandler.bind(this)}/>
</div>
</div>);
}
}
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.2.43/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/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';
export default class App extends React.Component<{}, {}> {
public sliderInstance: SliderComponent;
public min = new Date(2013, 6, 13, 11).getTime();
public max = new Date(2013, 6, 13, 17).getTime();
public value = new Date(2013, 6, 13, 13).getTime();
public step = 3600000;
public showButtons = true;
// Slider ticks customization
public ticks: TicksDataModel = { placement: "After", largeStep: 2 * 3600000 };
public tooltip: TooltipDataModel = { placement: "Before", isVisible: true };
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);
}
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);
}
onClick(){
const slider = document.getElementById("case");
if(slider){
slider.style.display = "block";
this.sliderInstance.refresh();
}
}
render() {
return (
<div id="container">
<button onClick={this.onClick.bind(this)}>Button</button>
<div id="case" className="wrap">
<SliderComponent
ref={t=>(this.sliderInstance = t as SliderComponent)}
min={this.min}
max={this.max}
value={this.value}
step={this.step}
tooltip={this.tooltip}
ticks={this.ticks}
showButtons={true}
tooltipChange={this.tooltipChangeHandler.bind(this) as any}
renderingTicks={this.renderingTicksHandler.bind(this) as any}
/>
</div>
</div>
);
}}
ReactDOM.render(<App />, document.getElementById('element'));