diff --git a/src/app/api/models/task.ts b/src/app/api/models/task.ts
index 4b530ffea1..39d6f7c2f4 100644
--- a/src/app/api/models/task.ts
+++ b/src/app/api/models/task.ts
@@ -89,6 +89,8 @@ export class Task extends Entity {
 
   private _unit: Unit;
 
+  public maxForSlider: number = 50; //max for date slider component for each task
+
   constructor(data?: Project | Unit) {
     super();
     if (data instanceof Project) {
@@ -298,6 +300,9 @@ export class Task extends Entity {
 
     return this.definition.localDueDate();
   }
+  public get checklocalDueDate(): Date {
+    return this.localDueDate();
+  }
 
   public localDueDateString(): string {
     const locale: string = AppInjector.get(LOCALE_ID);
@@ -317,7 +322,26 @@ export class Task extends Entity {
 
     return Math.ceil(diffInDays / 7);
   }
+  /*
+    Get percentage for task completion
+  */
+  public get maxForDataSlider() {
+    return this.maxForSlider;
+  }
+  public get taskPeriodProgress() {
+    const today = new Date();
 
+    //use Math.abs to avoid sign
+    if (today <= this.startDate) return 0;
+    if (today >= this.checklocalDueDate) return this.maxForSlider;
+
+    const startToNow = Math.abs(today.valueOf() - this.startDate.valueOf());
+    const totalDuration = Math.abs(this.taskTotalDuration);
+    return Math.round((startToNow / totalDuration) * this.maxForSlider);
+  }
+  public get taskTotalDuration(): number {
+    return this.checklocalDueDate.valueOf() - this.startDate.valueOf();
+  }
   /**
    * Set the task to be due in a specific week.
    *
diff --git a/src/app/common/modals/date-change-modal/task-date-slider.component.ts b/src/app/common/modals/date-change-modal/task-date-slider.component.ts
index 4da6b3a2f8..a7c27938e0 100644
--- a/src/app/common/modals/date-change-modal/task-date-slider.component.ts
+++ b/src/app/common/modals/date-change-modal/task-date-slider.component.ts
@@ -31,8 +31,8 @@ export class TaskDateSliderComponent implements OnChanges {
     private confirmationModalService: ConfirmationModalService,
   ) {}
 
-  public get max(): number {
-    return this.task.unit.totalWeeks + Math.ceil(this.task.project.specConDays / 7);
+  public get max() {
+    return this.task.maxForDataSlider;
   }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -41,7 +41,7 @@ export class TaskDateSliderComponent implements OnChanges {
         this.cancelEdit();
       }
 
-      this.value = this.task.dueWeek;
+      this.value = this.task.taskPeriodProgress;
       this._originalDueDate = this.task.dueDate;
       this._originalExtension = this.task.extensions;
     }