Fix slider

src/PortfolioPlanning/Components/Plan/PlanTimeline.tsx

@@ -19,6 +19,7 @@ import { Button } from "azure-devops-ui/Button";
 
 const day = 60 * 60 * 24 * 1000;
 const week = day * 7;
+const sliderSteps = 50;
 
 type Unit = `second` | `minute` | `hour` | `day` | `month` | `year`;
 
@@ -68,27 +69,39 @@ export class PlanTimeline extends React.Component<IPlanTimelineProps, IPlanTimel
                     <div className="plan-timeline-zoom-slider">
                         <Slider
                             min={0}
-                            max={10}
+                            max={sliderSteps}
                             step={1}
                             value={this.state.sliderValue}
                             showValue={true}
                             onChange={(value: number) => {
                                 const middlePoint = moment(
-                                    (this.defaultTimeEnd.valueOf() + this.defaultTimeStart.valueOf()) / 2
+                                    (this.state.visibleTimeEnd.valueOf() + this.state.visibleTimeStart.valueOf()) / 2
                                 );
-                                const mostZoomedInTimeStart = middlePoint.add(-4, "days");
+
+                                const mostZoomedInTimeStart = moment(middlePoint).add(-4, "days");
+                                const mostZoomedInTimeEnd = moment(middlePoint).add(4, "days");
+
                                 const stepSize =
-                                    (mostZoomedInTimeStart.valueOf() - this.defaultTimeStart.valueOf()) / 10;
+                                    (this.defaultTimeEnd.valueOf() - this.defaultTimeStart.valueOf()) / sliderSteps / 2;
 
-                                let newVisibleTimeStart: moment.Moment;
-                                let newVisibleTimeEnd: moment.Moment;
+                                let newVisibleTimeStart = moment(this.state.visibleTimeStart);
+                                let newVisibleTimeEnd = moment(this.state.visibleTimeEnd);
 
-                                if (value < this.state.sliderValue) {
-                                    newVisibleTimeStart = this.state.visibleTimeStart.add(-stepSize, "milliseconds");
-                                    newVisibleTimeEnd = this.state.visibleTimeEnd.add(stepSize, "milliseconds");
+                                if (value === sliderSteps) {
+                                    newVisibleTimeStart = mostZoomedInTimeStart;
+                                    newVisibleTimeEnd = mostZoomedInTimeEnd;
+                                } else if (value === 0) {
+                                    const difference =
+                                        (this.defaultTimeEnd.valueOf() - this.defaultTimeStart.valueOf()) / 2;
+
+                                    newVisibleTimeStart = moment(middlePoint).add(-difference, "milliseconds");
+                                    newVisibleTimeEnd = moment(middlePoint).add(difference, "milliseconds");
+                                } else if (value < this.state.sliderValue) {
+                                    newVisibleTimeStart.add(-stepSize, "milliseconds");
+                                    newVisibleTimeEnd.add(stepSize, "milliseconds");
                                 } else {
-                                    newVisibleTimeStart = this.state.visibleTimeStart.add(stepSize, "milliseconds");
-                                    newVisibleTimeEnd = this.state.visibleTimeEnd.add(-stepSize, "milliseconds");
+                                    newVisibleTimeStart.add(stepSize, "milliseconds");
+                                    newVisibleTimeEnd.add(-stepSize, "milliseconds");
                                 }
 
                                 this.setState({