chore(kit): Range add not-chromium Edge support (16-18)

taiga-family · Apr 5, 2022 · f52aecc · f52aecc
1 parent 6df9d6a
commit f52aecc
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/projects/kit/components/range/range-change.directive.ts b/projects/kit/components/range/range-change.directive.ts
@@ -2,7 +2,7 @@ import {DOCUMENT} from '@angular/common';
 import {Directive, ElementRef, Inject} from '@angular/core';
 import {clamp, round, TuiDestroyService, typedFromEvent} from '@taiga-ui/cdk';
 import {TUI_FLOATING_PRECISION} from '@taiga-ui/kit/constants';
-import {merge, Observable, race} from 'rxjs';
+import {merge, Observable} from 'rxjs';
 import {filter, map, repeat, startWith, switchMap, takeUntil, tap} from 'rxjs/operators';
 
 import {TuiRangeComponent} from './range.component';
@@ -54,8 +54,9 @@ export class TuiRangeChangeDirective {
                 }),
                 switchMap(event => this.pointerMove$.pipe(startWith(event))),
                 map(({clientX}) => clamp(this.getFractionFromEvents(clientX), 0, 1)),
-                takeUntil(race(this.pointerUp$, destroy$)),
+                takeUntil(this.pointerUp$),
                 repeat(),
+                takeUntil(destroy$),
             )
             .subscribe(fraction => {
                 const value = this.range.getValueFromFraction(

diff --git a/projects/kit/components/range/range.style.less b/projects/kit/components/range/range.style.less
@@ -85,6 +85,15 @@
         &::-moz-range-progress {
             background: transparent;
         }
+
+        /* Not-chromium Edge (16-18) */
+        &::-ms-track {
+            background: transparent;
+        }
+
+        &::-ms-fill-lower {
+            background: transparent;
+        }
     }
 }
 

diff --git a/projects/kit/components/slider/slider.style.less b/projects/kit/components/slider/slider.style.less
@@ -155,6 +155,7 @@
 :host._old-edge {
     &::-ms-thumb {
         background: @thumb-color;
+        border-radius: 50%;
     }
 
     &::-ms-fill-lower {
@@ -163,5 +164,6 @@
 
     &::-ms-track {
         background: @track-color;
+        border: none;
     }
 }