diff --git a/src/components/slider/slider.scss b/src/components/slider/slider.scss
index 68bc6fd1fc..0a0252d38d 100644
--- a/src/components/slider/slider.scss
+++ b/src/components/slider/slider.scss
@@ -58,14 +58,6 @@ $colorGrey: #999999;
     top: 2rem;
 }
 
-.slider__readonly {
-    height: 100%;
-    opacity: 0;
-    position: absolute;
-    top: 0;
-    width: 100%;
-}
-
 .mdc-slider {
     height: 2.8rem;
 }
diff --git a/src/components/slider/slider.tsx b/src/components/slider/slider.tsx
index 4a51280983..ff12a763ad 100644
--- a/src/components/slider/slider.tsx
+++ b/src/components/slider/slider.tsx
@@ -42,6 +42,10 @@ export class Slider {
         this.mdcSlider.listen('MDCSlider:change', this.changeHandler);
     }
 
+    public componentWillUpdate() {
+        this.mdcSlider.disabled = this.disabled;
+    }
+
     public componentDidUnload() {
         this.mdcSlider.destroy();
     }
@@ -68,6 +72,7 @@ export class Slider {
                         aria-valuemax={this.valuemax}
                         aria-valuenow={this.value}
                         aria-label={this.label}
+                        aria-disabled={this.disabled}
                     >
                         <div class="mdc-slider__track-container">
                             <div class="mdc-slider__track" />
@@ -89,7 +94,6 @@ export class Slider {
                         </div>
                     </div>
                 </div>
-                {this.disabled ? <div class="slider__readonly" /> : null}
             </div>
         );
     }