fix(kit): Slider readonly state (mobile chrome bug)

projects/kit/components/range/range.style.less

@@ -12,6 +12,7 @@
     cursor: pointer;
     outline: none;
     margin: @extra-click-area-space 0;
+    touch-action: pan-x;
 
     &:active {
         cursor: ew-resize;

projects/kit/components/slider/slider-readonly.directive.ts

@@ -1,41 +1,60 @@
-import {Directive, HostListener, Input} from '@angular/core';
-import {tuiDefaultProp} from '@taiga-ui/cdk';
+import {
+    ChangeDetectorRef,
+    Directive,
+    HostListener,
+    Inject,
+    Input,
+    Optional,
+    Self,
+} from '@angular/core';
+import {NgControl} from '@angular/forms';
+import {tuiDefaultProp, TuiDestroyService, watch} from '@taiga-ui/cdk';
+import {Observable} from 'rxjs';
+import {takeUntil} from 'rxjs/operators';
 
-const SLIDER_INTERACTION_KEYS = new Set([
-    'ArrowLeft',
-    'ArrowRight',
-    'ArrowUp',
-    'ArrowDown',
-    'Home',
-    'End',
-    'PageUp',
-    'PageDown',
-]);
+import {TuiSliderComponent} from './slider.component';
 
 /**
  * Native <input type='range' readonly> doesn't work.
  * This directive imitates this native behaviour.
  */
 @Directive({
     selector: 'input[tuiSlider][readonly]',
+    providers: [TuiDestroyService],
 })
 export class TuiSliderReadonlyDirective {
+    private lastValue = this.slider.value;
+
     @Input()
     @tuiDefaultProp()
     readonly: '' | boolean = true;
 
-    @HostListener('mousedown', ['$event'])
-    @HostListener('touchstart', ['$event'])
-    preventEvent(event: Event) {
-        if (this.readonly === '' || this.readonly) {
-            event.preventDefault();
+    get computedReadonly(): boolean {
+        return this.readonly === '' || this.readonly;
+    }
+
+    constructor(
+        @Optional()
+        @Self()
+        @Inject(NgControl)
+        readonly ngControl: NgControl | null,
+        @Inject(ChangeDetectorRef) changeDetectorRef: ChangeDetectorRef,
+        @Inject(TuiDestroyService) destroy$: Observable<unknown>,
+        @Inject(TuiSliderComponent) private readonly slider: TuiSliderComponent,
+    ) {
+        if (ngControl !== null) {
+            ngControl.valueChanges
+                ?.pipe(watch(changeDetectorRef), takeUntil(destroy$))
+                .subscribe(() => {
+                    this.lastValue = this.slider.value;
+                });
         }
     }
 
-    @HostListener('keydown', ['$event'])
-    preventKeyboardInteraction(event: KeyboardEvent) {
-        if (SLIDER_INTERACTION_KEYS.has(event.key)) {
-            this.preventEvent(event);
+    @HostListener('input')
+    onInput() {
+        if (this.computedReadonly) {
+            this.slider.value = this.lastValue;
         }
     }
 }