diff --git a/projects/common/components/input-elements/slider.component.ts b/projects/common/components/input-elements/slider.component.ts
index 5d5fac6c4b95049a38d06f98dfd64865d33869e8..31811f4c704a855a05bcd0e2726d352dd74b75fe 100644
--- a/projects/common/components/input-elements/slider.component.ts
+++ b/projects/common/components/input-elements/slider.component.ts
@@ -73,7 +73,7 @@ import { FormElementComponent } from '../../directives/form-element-component.di
            [style.margin-left.px]="elementModel.barStyle ? valueMin.offsetWidth/2 - 8: valueMin.offsetWidth"
            [style.margin-top.px]="elementModel.barStyle ? -32 : -valueContainer.offsetHeight">
         <mat-slider [class]="elementModel.barStyle ? 'bar-style' : ''"
-                    [disabled]="elementModel.readOnly"
+                    [isDisabled]="elementModel.readOnly"
                     [thumbLabel]="elementModel.thumbLabel"
                     [formControl]="elementFormControl"
                     [style.width.%]="100"
diff --git a/projects/common/directives/is-disabled.directive.ts b/projects/common/directives/is-disabled.directive.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f2fa6b13b1ee6d2850735b9b29fbdafea80b237f
--- /dev/null
+++ b/projects/common/directives/is-disabled.directive.ts
@@ -0,0 +1,20 @@
+import {
+  Directive, Input, OnChanges, SimpleChanges
+} from '@angular/core';
+import { NgControl } from '@angular/forms';
+
+@Directive({
+  selector: '[isDisabled]'
+})
+export class IsDisabledDirective implements OnChanges {
+  @Input() isDisabled!: boolean;
+
+  constructor(private ngControl : NgControl) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.isDisabled && this.ngControl) {
+      const action = changes.isDisabled.currentValue ? 'disable' : 'enable';
+      this.ngControl?.control?.[action]();
+    }
+  }
+}
diff --git a/projects/common/shared.module.ts b/projects/common/shared.module.ts
index 54576116bf89365b2c2800373bd62a97f1a709d8..f5970abc7b04bd63c97a188697ba5e6d89f88ca7 100644
--- a/projects/common/shared.module.ts
+++ b/projects/common/shared.module.ts
@@ -65,6 +65,7 @@ import { StyleMarksPipe } from './pipes/styleMarks.pipe';
 import { TextMarkingButtonComponent } from './components/text/text-marking-bar/text-marking-button.component';
 import { CompoundChildOverlayComponent } from './components/compound-elements/cloze/compound-child-overlay.component';
 import { MarkListPipe } from './pipes/mark-list.pipe';
+import { IsDisabledDirective } from './directives/is-disabled.directive';
 
 @NgModule({
   imports: [
@@ -120,7 +121,8 @@ import { MarkListPipe } from './pipes/mark-list.pipe';
     StyleMarksPipe,
     TextMarkingButtonComponent,
     CompoundChildOverlayComponent,
-    MarkListPipe
+    MarkListPipe,
+    IsDisabledDirective
   ],
   exports: [
     CommonModule,