diff --git a/src/app/app.component.html b/src/app/app.component.html
index bf170c3..1e20bee 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -17,13 +17,13 @@
-
+
-
+
- {{ currentState.time | date: 'dd/M/yyyy - HH:mm:ss'}}
+ {{ currentState.time | date: 'dd/M/yyyy - HH:mm'}}
+ [disabled]="isdisabled" [displayWith]="formatLabel">
diff --git a/src/app/time-slider/time-slider.component.scss b/src/app/time-slider/time-slider.component.scss
index 4ee3b28..0431359 100644
--- a/src/app/time-slider/time-slider.component.scss
+++ b/src/app/time-slider/time-slider.component.scss
@@ -14,6 +14,7 @@
mat-slider {
width: calc(100% - (92px + 30px));
+ margin: 0 1.5rem;
--mdc-slider-handle-color: rgb(235, 156, 70);
--mdc-slider-focus-handle-color: rgb(235, 156, 70);
diff --git a/src/app/time-slider/time-slider.component.ts b/src/app/time-slider/time-slider.component.ts
index 00bfb13..6bc4570 100644
--- a/src/app/time-slider/time-slider.component.ts
+++ b/src/app/time-slider/time-slider.component.ts
@@ -1,5 +1,6 @@
import { Component, OnInit, OnChanges } from '@angular/core';
import { Input, Output, EventEmitter } from '@angular/core';
+import { DatePipe } from '@angular/common';
import { findClosestDate } from '../utills';
export interface IdateChange {
@@ -9,7 +10,8 @@ export interface IdateChange {
@Component({
selector: 'app-time-slider',
templateUrl: './time-slider.component.html',
- styleUrls: ['./time-slider.component.scss']
+ styleUrls: ['./time-slider.component.scss'],
+ providers: [DatePipe]
})
export class TimeSliderComponent implements OnChanges {
@@ -27,10 +29,15 @@ export class TimeSliderComponent implements OnChanges {
playing = false;
intervalID: any;
isdisabled = true;
- constructor() {
+ constructor(private datePipe: DatePipe) {
}
+ formatLabel = (value: number) => {
+ const now = (this.dates && this.sValue) ? this.dates[this.sValue] : this.dates[this.sMin];
+ return this.datePipe.transform(now,'HH:mm');
+ }
+
setSlider(value: '+' | '-') {
if (value === '+') {
this.sValue += this.sStep;