Date Range Slider in Angular

26 Feb 20264 minutes to read

Create a Range Slider that displays date values by formatting ticks and tooltips. Use the renderingTicks event to format tick labels as dates and the tooltipChange event to format tooltip text. The following sample demonstrates how to implement date formatting in a slider.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { SliderModule } from '@syncfusion/ej2-angular-inputs'
import { Component } from '@angular/core';
import { SliderTickEventArgs, SliderTooltipEventArgs } from '@syncfusion/ej2-angular-inputs';

@Component({
    imports: [
        SliderModule
    ],
    standalone: true,
    selector: 'my-app',
    template: `
    <div id='container'>
        <div class='wrap'>
            <ejs-slider id='slider' [min]="min" [max]="max" [value]="value" step=86400000 [tooltip]="tooltipData" [ticks]="ticksData" [showButtons]=true
                (tooltipChange)='tooltipChangeHandler($event)' (renderingTicks)='renderingTicksHandler($event)'></ejs-slider>
        </div>
    </div>`,
})

export class AppComponent {
    public tooltipData: Object = { placement: 'Before', isVisible: true };
    public ticksData: Object = { placement: 'After', largeStep: 2 * 86400000 };
    public min: number = new Date("2013-06-13").getTime();
    public max: number = new Date("2013-06-21").getTime();
    public step: number = 86400000;
    public value: number = new Date("2013-06-15").getTime();

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

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

styles.css

@import 'node_modules/@syncfusion/ej2-base/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material3.css';

.wrap {
    box-sizing: border-box;
    height: 100px;
    margin: 0 auto;
    padding: 30px 10px;
    width: 460px;
  }
  
  .wrap .label {
    text-align: center;
  }

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));