Add slider to player

In fact, make changes in common to let the player understand the slider component.

projects/common/element-components/slider.component.ts

 import { Component, EventEmitter, Output } from '@angular/core';
 import { ElementComponent } from '../element-component.directive';
 import { SliderElement } from '../models/slider-element';
+import { FormElementComponent } from '../form-element-component.directive';
 
 @Component({
   selector: 'app-slider',
@@ -9,22 +10,23 @@ import { SliderElement } from '../models/slider-element';
          [style.background-color]="elementModel.backgroundColor"
          [style.width.%]="100"
          [style.height.%]="100">
-      <div *ngIf="elementModel.showLabel">{{elementModel.minValue | number:'.0'}}</div>
+      <div *ngIf="elementModel.showValues">{{elementModel.minValue | number:'.0'}}</div>
       <mat-slider
+              [formControl]="elementFormControl"
               [style.width.%]="100"
               [style.height.%]="100"
               [max]="elementModel.maxValue"
               [min]="elementModel.minValue">
       </mat-slider>
-      <div *ngIf="elementModel.showLabel">{{elementModel.maxValue | number:'.0'}}</div>
+      <div *ngIf="elementModel.showValues">{{elementModel.maxValue | number:'.0'}}</div>
     </div>
   `,
   styles: [
     '.dynamic-image{width: 100%; height: fit-content}',
-    '.static-image{ width: 100%; height: 100%; object-fit: contain}'
+    '.static-image{ width: 100%; height: 100%; object-fit: contain}',
+    ':host ::ng-deep .mat-slider-thumb{border-radius: 0; width: 10px; height: 40px; bottom: -15px}'
   ]
 })
-export class SliderComponent extends ElementComponent {
+export class SliderComponent extends FormElementComponent {
   elementModel!: SliderElement;
-
 }

projects/common/models/slider-element.ts

 import { SurfaceUIElement } from '../interfaces/UIElementInterfaces';
-import { UIElement } from './uI-element';
+import { InputElement, UIElement} from './uI-element';
 import { initSurfaceElement } from '../util/unit-interface-initializer';
 
-export class SliderElement extends UIElement implements SurfaceUIElement {
-  label: string = 'Zahlenstrahl';
+export class SliderElement extends InputElement implements SurfaceUIElement {
   minValue: number = 0;
   maxValue: number = 100;
-  showLabel: boolean = true;
+  showValues: boolean = true;
 
   backgroundColor: string = 'transparent';
 

projects/editor/src/app/unit-view/page-view/new-ui-element-panel/ui-element-toolbox.component.html

@@ -66,7 +66,7 @@
       </button>
       <button mat-raised-button (click)="addUIElement('slider')"
               draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','slider')">
-        <mat-icon>spa</mat-icon>
+        <mat-icon>linear_scale</mat-icon>
         Zahlenstrahl
       </button>
     </div>

projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.html

@@ -437,10 +437,10 @@
           {{'propertiesPanel.onlyOneItem' | translate }}
         </mat-checkbox>
 
-        <mat-checkbox *ngIf="combinedProperties.showLabel !== undefined"
-                      [checked]="$any(combinedProperties.showLabel)"
-                      (change)="updateModel('showLabel', $event.checked)">
-          {{'propertiesPanel.showLabel' | translate }}
+        <mat-checkbox *ngIf="combinedProperties.showValues !== undefined"
+                      [checked]="$any(combinedProperties.showValues)"
+                      (change)="updateModel('showValues', $event.checked)">
+          {{'propertiesPanel.showValues' | translate }}
         </mat-checkbox>
 
         <mat-divider></mat-divider>

projects/editor/src/assets/i18n/de.json

@@ -92,7 +92,7 @@
     "minLengthWarnMessage": "Minimalwert Warnmeldung",
     "maxLength": "Maximalwert",
     "maxValue": "Maximalwert",
-    "showLabel": "Zeige Beschriftung",
+    "showValues": "Zeige Beschriftung",
     "maxLengthWarnMessage": "Maximalwert Warnmeldung",
     "pattern": "Muster",
     "patternWarnMessage": "Muster Warnmeldung",