HelpBot Assistant

How can I help you?

Date range Slider in React Range Slider component

21 Feb 20268 minutes to read

Date formatting can be achieved in ticks and tooltip using the renderingTicks and tooltipChange events. The following example demonstrates date formatting.

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';
function App() {
  let min = new Date("2013-06-13").getTime();
  let max = new Date("2013-06-21").getTime();
  let step = 86400000;
  let value = new Date("2013-06-15").getTime();
  // Slider ticks customization
  let ticks = { placement: "After", largeStep: 2 * 86400000 };
  let tooltip = { placement: "Before", isVisible: true };
  function renderingTicksHandler(args) {
    let totalMiliSeconds = Number(args.value);
    // Converting the current milliseconds to the respective date in desired format
    let custom = { year: "numeric", month: "short", day: "numeric" };
    args.text = new Date(totalMiliSeconds).toLocaleDateString("en-us", custom);
  }
  function tooltipChangeHandler(args) {
    let totalMiliSeconds = Number(args.text);
    // Converting the current milliseconds to the respective date in desired format
    let custom = { year: "numeric", month: "short", day: "numeric" };
    args.text = new Date(totalMiliSeconds).toLocaleDateString("en-us", custom);
  }
  return (<div id="container">
    <div className="wrap">
      <SliderComponent id="slider" 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'));
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SliderComponent } from '@syncfusion/ej2-react-inputs';

function App() {
  let min = new Date("2013-06-13").getTime();
  let max = new Date("2013-06-21").getTime();
  let step = 86400000;
  let value = new Date("2013-06-15").getTime();

  // Slider ticks customization
  let ticks: TicksDataModel = { placement: "After", largeStep: 2 * 86400000 };
  let tooltip: TooltipDataModel = { placement: "Before", isVisible: true };

  function renderingTicksHandler(args: SliderTickEventArgs) {
    let totalMiliSeconds = Number(args.value);
    // Converting the current milliseconds to the respective date in desired format
    let custom = { year: "numeric", month: "short", day: "numeric" };
    args.text = new Date(totalMiliSeconds).toLocaleDateString("en-us", custom);
  }

  function tooltipChangeHandler(args: SliderTooltipEventArgs) {
    let totalMiliSeconds = Number(args.text);
    // Converting the current milliseconds to the respective date in desired format
    let custom = { year: "numeric", month: "short", day: "numeric" };
    args.text = new Date(totalMiliSeconds).toLocaleDateString("en-us", custom);
  }
  return (
    <div id="container">
      <div className="wrap">
        <SliderComponent
          id="slider"
          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'));
.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;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React 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 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-react-inputs/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-react-popups/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-react-buttons/styles/tailwind3.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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='element'>
    </div>
</body>

</html>