diff --git a/projects/common/element-components/pipes/error-transform.pipe.ts b/projects/common/element-components/pipes/error-transform.pipe.ts
index 14d1e74fd0af269958edfa79d1c3a5573679f411..9b65afe682f88b63a843403b93b2bed8727e473c 100644
--- a/projects/common/element-components/pipes/error-transform.pipe.ts
+++ b/projects/common/element-components/pipes/error-transform.pipe.ts
@@ -17,7 +17,8 @@ export class ErrorTransformPipe implements PipeTransform {
       if (returnMessage) {
         returnMessage += '; ';
       }
-      const messageKey = errorKey === 'required' && elementModel.type === 'checkbox' ? 'requiredTrue' : errorKey;
+      const messageKey = (errorKey === 'required' && elementModel.type === 'checkbox') ||
+        (errorKey === 'min' && elementModel.type === 'slider') ? 'requiredTrue' : errorKey;
       returnMessage += validationMessages[messageKey];
     });
     return returnMessage;
diff --git a/projects/common/element-components/slider.component.ts b/projects/common/element-components/slider.component.ts
index ee7d707ec9f5393a1bdae7dc4a00bcddf2d81a2f..b40926916f3266b7117699ad1359d60c7c1b1126 100644
--- a/projects/common/element-components/slider.component.ts
+++ b/projects/common/element-components/slider.component.ts
@@ -1,24 +1,49 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import {Component, ElementRef, EventEmitter, OnInit, Output, ViewChild} from '@angular/core';
 import { ElementComponent } from '../element-component.directive';
 import { SliderElement } from '../models/slider-element';
 import { FormElementComponent } from '../form-element-component.directive';
+import {ValidatorFn, Validators} from "@angular/forms";
 
 @Component({
   selector: 'app-slider',
   template: `
     <div [style.display]="'flex'"
+         [style.flex-direction]="'row'"
          [style.background-color]="elementModel.backgroundColor"
          [style.width.%]="100"
          [style.height.%]="100">
-      <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.showValues">{{elementModel.maxValue | number:'.0'}}</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.minValue | number:'.0'}}</div>
+      <div [style.display]="'flex'"
+           [style.flex-direction]="'column'"
+           [style.width.%]="100"
+           [style.height.%]="100">
+        <mat-slider
+          [formControl]="elementFormControl"
+          [disabled]="elementModel.readOnly"
+          [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>
   `,
   styles: [
@@ -29,4 +54,14 @@ import { FormElementComponent } from '../form-element-component.directive';
 })
 export class SliderComponent extends FormElementComponent {
   elementModel!: SliderElement;
+  // todo: ?? setting disabled attribute of slider may cause 'changed after checked' error
+  // todo: localize 'number' pipe to show '.' instead of ',' by values greater then 999
+
+  get validators(): ValidatorFn[] {
+    const validators: ValidatorFn[] = [];
+    if (this.elementModel.required) {
+      validators.push(Validators.min(this.elementModel.minValue + 1));
+    }
+    return validators;
+  }
 }
diff --git a/projects/common/models/slider-element.ts b/projects/common/models/slider-element.ts
index 798c3997f7dac6462017c965c0374361047dc19b..554e7dfca4e8dc0ba5d218a28fed30944c184f56 100644
--- a/projects/common/models/slider-element.ts
+++ b/projects/common/models/slider-element.ts
@@ -1,17 +1,31 @@
-import { SurfaceUIElement } from '../interfaces/UIElementInterfaces';
+import {FontElement, SurfaceUIElement} from '../interfaces/UIElementInterfaces';
 import { InputElement, UIElement} from './uI-element';
-import { initSurfaceElement } from '../util/unit-interface-initializer';
+import {initFontElement, initSurfaceElement} from '../util/unit-interface-initializer';
 
-export class SliderElement extends InputElement implements SurfaceUIElement {
+export class SliderElement extends InputElement implements FontElement, SurfaceUIElement {
   minValue: number = 0;
   maxValue: number = 100;
   showValues: boolean = true;
 
-  backgroundColor: string = 'transparent';
+  bold: boolean = false;
+  font: string = 'Roboto';
+  fontColor: string = 'black';
+  fontSize: number = 18;
+  italic: boolean = false;
+  lineHeight: number = 120;
+  underline: boolean = false;
+
+  backgroundColor: string = '#AAA0';
 
   constructor(serializedElement: UIElement) {
     super(serializedElement);
     Object.assign(this, serializedElement);
+    Object.assign(this, initFontElement(serializedElement));
+    if (!serializedElement.backgroundColor) {
+      serializedElement.backgroundColor = '#d3d3d300';
+    }
     Object.assign(this, initSurfaceElement(serializedElement));
+    // todo: delete this.label --> label must be declared as optional
   }
+
 }
diff --git a/projects/editor/src/assets/i18n/de.json b/projects/editor/src/assets/i18n/de.json
index 2c93021dda74e06d28de17fe8b087f8af5a14678..e1fcdbf5238582b03c2b0a02e731cfe878f480f8 100644
--- a/projects/editor/src/assets/i18n/de.json
+++ b/projects/editor/src/assets/i18n/de.json
@@ -92,7 +92,7 @@
     "minLengthWarnMessage": "Minimalwert Warnmeldung",
     "maxLength": "Maximalwert",
     "maxValue": "Maximalwert",
-    "showValues": "Zeige Beschriftung",
+    "showValues": "Zeige Start- und Endwert",
     "maxLengthWarnMessage": "Maximalwert Warnmeldung",
     "pattern": "Muster",
     "patternWarnMessage": "Muster Warnmeldung",