Apply label as title of element

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

@@ -7,44 +7,55 @@ import { FormElementComponent } from '../form-element-component.directive';
 @Component({
   selector: 'app-slider',
   template: `
-    <div [style.display]="'flex'"
-         [style.flex-direction]="'row'"
+    <div fxLayout="column"
          [style.background-color]="elementModel.backgroundColor"
          [style.width.%]="100"
          [style.height.%]="100">
-      <div *ngIf="elementModel.showValues"
-           [style.color]="elementModel.fontColor"
-           [style.font-family]="elementModel.font"
-           [style.font-size.px]="elementModel.fontSize"
-           [style.line-height.%]="elementModel.lineHeight"
-           [style.font-weight]="elementModel.bold ? 'bold' : ''"
-           [style.font-style]="elementModel.italic ? 'italic' : ''"
-           [style.text-decoration]="elementModel.underline ? 'underline' : ''">
-        {{elementModel.minValue | number:'.0'}}
+      <div *ngIf="elementModel.label"
+         [style.color]="elementModel.fontColor"
+         [style.font-family]="elementModel.font"
+         [style.font-size.px]="elementModel.fontSize"
+         [style.line-height.%]="elementModel.lineHeight"
+         [style.font-weight]="elementModel.bold ? 'bold' : ''"
+         [style.font-style]="elementModel.italic ? 'italic' : ''"
+         [style.text-decoration]="elementModel.underline ? 'underline' : ''">
+          {{elementModel.label}}
       </div>
-      <div [style.display]="'flex'"
-           [style.flex-direction]="'column'"
-           [style.width.%]="100"
-           [style.height.%]="100">
-        <mat-slider
-          [formControl]="elementFormControl"
-          [style.width.%]="100"
-          [max]="elementModel.maxValue"
-          [min]="elementModel.minValue">
-        </mat-slider>
-        <mat-error *ngIf="elementFormControl.touched && elementFormControl.errors">
-          {{elementFormControl.errors | errorTransform: elementModel}}
-        </mat-error>
+      <div fxFlex fxLayout="row">
+        <div *ngIf="elementModel.showValues" fxFlex
+             [style.color]="elementModel.fontColor"
+             [style.font-family]="elementModel.font"
+             [style.font-size.px]="elementModel.fontSize"
+             [style.line-height.%]="elementModel.lineHeight"
+             [style.font-weight]="elementModel.bold ? 'bold' : ''"
+             [style.font-style]="elementModel.italic ? 'italic' : ''"
+             [style.text-decoration]="elementModel.underline ? 'underline' : ''">
+          {{elementModel.minValue | number:'.0'}}
+        </div>
+        <div [style.display]="'flex'"
+             [style.flex-direction]="'column'"
+             [style.width.%]="100"
+             [style.height.%]="100">
+          <mat-slider
+            [formControl]="elementFormControl"
+            [style.width.%]="100"
+            [max]="elementModel.maxValue"
+            [min]="elementModel.minValue">
+          </mat-slider>
+          <mat-error *ngIf="elementFormControl.touched && elementFormControl.errors">
+            {{elementFormControl.errors | errorTransform: elementModel}}
+          </mat-error>
+        </div>
+        <div *ngIf="elementModel.showValues"
+             [style.color]="elementModel.fontColor"
+             [style.font-family]="elementModel.font"
+             [style.font-size.px]="elementModel.fontSize"
+             [style.line-height.%]="elementModel.lineHeight"
+             [style.font-weight]="elementModel.bold ? 'bold' : ''"
+             [style.font-style]="elementModel.italic ? 'italic' : ''"
+             [style.text-decoration]="elementModel.underline ? 'underline' : ''"
+        >{{elementModel.maxValue | number:'.0'}}</div>
       </div>
-      <div *ngIf="elementModel.showValues"
-           [style.color]="elementModel.fontColor"
-           [style.font-family]="elementModel.font"
-           [style.font-size.px]="elementModel.fontSize"
-           [style.line-height.%]="elementModel.lineHeight"
-           [style.font-weight]="elementModel.bold ? 'bold' : ''"
-           [style.font-style]="elementModel.italic ? 'italic' : ''"
-           [style.text-decoration]="elementModel.underline ? 'underline' : ''"
-      >{{elementModel.maxValue | number:'.0'}}</div>
     </div>
   `,
   styles: [