Merge pull request #5401 from IgniteUI/fix-#5359

fix(slider): can't mouse move slider thumbs in IE11

Author: zdrawku

projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss

@@ -147,7 +147,9 @@
         justify-content: center;
         align-items: center;
         flex-direction: column;
-        outline: none;
+        width: $slider-thumb-width;
+        height: $slider-thumb-height;
+        outline-style: none;
         top: -#{rem($slider-thumb-radius)};
         margin-left: -#{rem($slider-thumb-radius)};
 
@@ -217,6 +219,7 @@
         position: relative;
         left: 0;
         padding: rem(20px);
+        pointer-events: none;
 
         &:hover::after {
             opacity: .12;

projects/igniteui-angular/src/lib/slider/thumb/thumb-slider.component.html

@@ -1,7 +1,7 @@
-<span class="label">
+<div class="label">
     <ng-container *ngTemplateOutlet="templateRef ? templateRef : thumbFromDefaultTemplate; context: context"></ng-container>
-</span>
-<span class="dot"></span>
+</div>
+<div class="dot"></div>
 
 
 <ng-template #thumbFromDefaultTemplate>

projects/igniteui-angular/src/lib/slider/thumb/thumb-slider.component.ts

@@ -8,7 +8,8 @@ import {
     EventEmitter,
     OnInit,
     OnDestroy,
-    TemplateRef} from '@angular/core';
+    TemplateRef
+} from '@angular/core';
 import { takeUntil } from 'rxjs/operators';
 import { SliderHandle } from '../slider.common';
 import { Subject } from 'rxjs';
@@ -112,7 +113,7 @@ export class IgxSliderThumbComponent implements OnInit, OnDestroy {
         return this._destroy$;
     }
 
-    constructor (private _elementRef: ElementRef) { }
+    constructor(private _elementRef: ElementRef) { }
 
     /**
      * @hidden