components/event-time-control/event-time-control.component.html

0001 <div class="time-slider-wrapper">
0002   <!-- Current Time (left side) -->
0003   <div class="time-label">
0004     <!-- If you're using a signal-based approach, eventTime() is how you read the signal -->
0005     {{ shownTime() | number:'1.1-1' }}
0006   </div>
0007
0008   <!-- The Slider -->
0009   <mat-slider
0010     class="tslider"
0011     [min]="eventDisplayService.minTime"
0012     [max]="eventDisplayService.maxTime"
0013     step="1"
0014     showTickMarks
0015     discrete
0016     [displayWith]="formatCurrentTime"
0017     (input)="changeCurrentTime($event)"
0018   >
0019     <!-- Slider thumb with direct binding to the current time -->
0020     <input matSliderThumb [value]="shownTime()" />
0021   </mat-slider>
0022
0023   <!-- Max Time (right side) -->
0024   <div class="time-label">
0025     {{ eventDisplayService.maxTime | number:'1.0-0' }} [ns]
0026   </div>
0027 </div>