fix(range): use correct color of thumb for disabled state (#1070)

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

What kind of change does this PR introduce?

<!-- Please check the one that applies to this PR using "x". -->

- [x] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

<!-- Please describe the current behavior that you are modifying, or
link to a relevant issue. -->

Issue Number: CDE-1449

- [ ] Yes
- [x] No

<!-- If this PR contains a breaking change, please describe the impact
and migration path for existing applications below. -->

ngModel tends to change template/classes and hence for disabled state
our rules for coloring of range's thumbs are overridden

That is why we want to set colors of thumb with !important directive so
that the real color is applied and not default gray color

Issue is only caught on Firefox browser

---------

Co-authored-by: GitHub <noreply@github.com>

projects/angular/src/forms/styles/_containers.clarity.scss

@@ -63,12 +63,11 @@
       );
     }
 
-    input[type='range']::-webkit-slider-thumb,
-    input[type='range']::-moz-range-thumb {
+    input[type='range']::-webkit-slider-thumb {
       @include mixins.css-var(
         background-color,
-        clr-forms-forms-range-progress-disabled-color,
-        forms-variables.$clr-forms-range-progress-fill-color-disabled,
+        clr-forms-border-disabled-color,
+        forms-variables.$clr-forms-border-disabled-color,
         variables.$clr-use-custom-properties
       );
     }

projects/ui/src/shim.cds-core.scss

@@ -865,6 +865,12 @@
   --clr-forms-range-thumb-margin-top: 7px; // TODO: ATM - get rid of this
   --clr-forms-range-progress-fill-height: 3px; // TODO: ATM - get rid of this
 
+  // Fix for disabled range thumb color on CDS theme (when using ngModel)
+  .clr-form-control-disabled input[type='range']::-webkit-slider-thumb,
+  .clr-form-control-disabled input[type='range']::-moz-range-thumb {
+    background-color: var(--clr-forms-range-progress-fill-color-disabled);
+  }
+
   // Password
   // TODO: ATM Make sure this is what we need,
   //  in spec it is --cds-alias-interaction-color, which is gray, hence it's put as fallback here