diff --git a/projects/common/element-components/slider.component.ts b/projects/common/element-components/slider.component.ts
index a917c3671f3ccbde99bdb8ee86794b439a8016e7..ee7d707ec9f5393a1bdae7dc4a00bcddf2d81a2f 100644
--- a/projects/common/element-components/slider.component.ts
+++ b/projects/common/element-components/slider.component.ts
@@ -1,6 +1,7 @@
 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;
-
 }
diff --git a/projects/common/models/slider-element.ts b/projects/common/models/slider-element.ts
index ac128467487edd229525686d5b2008b740baa398..798c3997f7dac6462017c965c0374361047dc19b 100644
--- a/projects/common/models/slider-element.ts
+++ b/projects/common/models/slider-element.ts
@@ -1,12 +1,11 @@
 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';
 
diff --git a/projects/editor/src/app/unit-view/page-view/new-ui-element-panel/ui-element-toolbox.component.html b/projects/editor/src/app/unit-view/page-view/new-ui-element-panel/ui-element-toolbox.component.html
index 4b0f29a76453f434a63ba9dd1c14818171c386fd..7c5a70ded3d9f137b9a1def225994edf2615b04d 100644
--- a/projects/editor/src/app/unit-view/page-view/new-ui-element-panel/ui-element-toolbox.component.html
+++ b/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>
diff --git a/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.html b/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.html
index 76f3be521518a1053c08c4355da3aaa9d5c36fb5..a08d23706cd6769f18b488b9e6d634e724a8fc6a 100644
--- a/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.html
+++ b/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>
diff --git a/projects/editor/src/assets/i18n/de.json b/projects/editor/src/assets/i18n/de.json
index e66e36171e677b68b6c8ba4432b49a04d6a15b98..2c93021dda74e06d28de17fe8b087f8af5a14678 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",
-    "showLabel": "Zeige Beschriftung",
+    "showValues": "Zeige Beschriftung",
     "maxLengthWarnMessage": "Maximalwert Warnmeldung",
     "pattern": "Muster",
     "patternWarnMessage": "Muster Warnmeldung",