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.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: 'app/template.html',
styleUrls:['index.css']
})
export class AppComponent {
public tooltipData: Object = { placement: 'Before', isVisible: true };
public ticksData: Object = { placement: 'After', largeStep: 2 * 3600000 };
public min: number =new Date(2013, 6, 13, 11).getTime();
public max: number = new Date(2013, 6, 13, 17).getTime();
public step: number = 3600000;
public value: number = new Date(2013, 6, 13, 13).getTime();
tooltipChangeHandler(args: SliderTooltipEventArgs): void {
let totalMiliSeconds = Number(args.text);
let custom = { hour: '2-digit', minute: '2-digit' };
args.text = new Date(totalMiliSeconds).toLocaleTimeString("en-us", custom);
}
renderingTicksHandler(args: SliderTickEventArgs): void {
let totalMiliSeconds = Number(args.value);
let custom = { hour: '2-digit', minute: '2-digit' };
args.text = new Date(totalMiliSeconds).toLocaleTimeString("en-us", custom);
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SliderModule } from '@syncfusion/ej2-angular-inputs';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
SliderModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<div id='container'>
<div class='wrap'>
<ejs-slider id='slider' [min]="min" [max]="max" [value]="value" [tooltip]="tooltipData" [ticks]="ticksData" [showButtons]=true [step]="step"
(tooltipChange)='tooltipChangeHandler($event)' (renderingTicks)='renderingTicksHandler($event)'></ejs-slider>
</div>
</div>
.wrap {
box-sizing: border-box;
height: 100px;
margin: 0 auto;
padding: 30px 10px;
width: 460px;
}
.wrap .label {
text-align: center;
}