From 2ec18cc91db5548d086e0fc59a3351f6d373d5a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Mon, 29 May 2023 22:08:04 +0300
Subject: [PATCH] RED-5875: Material upgrade - slider

---
 src/assets/styles/common-slider.scss | 56 +++++++---------------------
 1 file changed, 14 insertions(+), 42 deletions(-)

diff --git a/src/assets/styles/common-slider.scss b/src/assets/styles/common-slider.scss
index 2eb38f6..6fb97b9 100644
--- a/src/assets/styles/common-slider.scss
+++ b/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;
     }
 }