Time range slider in React Range Slider component

20 Apr 2021 / 1 minute to read

The time formatting can be achieved same as the date formatting using renderingTicks and change events. The process of time formatting is explained in the below sample.

Source

Preview

index.tsx

index.html

index.css

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<{}, {}> {
  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;

  // 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);
  }

  render() {
    return (
      <div id="container">
        <div className="wrap">
          <SliderComponent
            id="slider"
            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'));

<!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/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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;
}

.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;
}