RED-5875: Material upgrade - slider

src/assets/styles/common-slider.scss

@@ -1,48 +1,20 @@
-.mat-slider-horizontal {
-    width: 140px;
-    height: 32px !important;
-
-    .mat-slider-wrapper {
-        left: 0 !important;
-        top: 16px !important;
-    }
-
-    .mat-slider-track-wrapper,
-    .mat-slider-track-fill {
-        height: 6px !important;
-        border-radius: 3px;
-    }
-
-    // For disabled state
-    .mat-slider-track-fill {
-        background-color: var(--iqser-primary);
-    }
-
-    .mat-slider-track-background {
-        height: 4px !important;
-        margin-top: 1px;
-        border-radius: 3px;
-        background-color: var(--iqser-toggle-bg) !important;
-    }
-
-    .mat-slider-focus-ring {
-        display: none;
-    }
+.mat-mdc-slider .mdc-slider__track .mdc-slider__track--inactive {
+    --mdc-slider-inactive-track-color: var(--iqser-toggle-bg);
+    opacity: 1;
 }
 
-.mat-slider-thumb {
-    width: 16px !important;
-    height: 16px !important;
-    border-width: 0 !important;
-    background-color: var(--iqser-primary) !important;
-}
+.mat-mdc-slider.mdc-slider {
+    margin-left: 0;
+    margin-right: 0;
 
-.mat-slider:not(.mat-slider-disabled):not(.mat-slider-sliding) .mat-slider-thumb {
-    transform: scale(1) !important;
-}
+    --mdc-slider-handle-width: 16px;
+    --mdc-slider-handle-height: 16px;
+    --mdc-slider-handle-elevation: none;
+    --mdc-slider-disabled-handle-color: var(--iqser-primary);
+    --mdc-slider-disabled-active-track-color: var(--iqser-grey-5);
+    --mdc-slider-disabled-inactive-track-color: var(--iqser-grey-7);
 
-.mat-slider-horizontal.mat-slider-disabled {
-    .mat-slider-thumb {
-        transform: translateX(-3px);
+    &.mdc-slider--disabled {
+        opacity: 1;
     }
 }