Search results

Show slider From hidden state in React Range Slider component

25 Jan 2023 / 2 minutes 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 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.

Source
Preview
index.jsx
index.html
index.css
index.tsx
Copied to clipboard
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'));
Copied to clipboard
<!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>
Copied to clipboard
.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;
}
Copied to clipboard
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'));