diff --git a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss
index 9f9fa0b98b2..0804499c5df 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss
@@ -128,6 +128,7 @@
         display: flex;
         position: relative;
         height: rem($slider-height);
+        flex-grow: 1;
         align-items: center;
         transition: all .2s $ease-out-quad;
 
diff --git a/projects/igniteui-angular/src/lib/slider/slider.component.spec.ts b/projects/igniteui-angular/src/lib/slider/slider.component.spec.ts
index ab2c7949983..a31a701ef1b 100644
--- a/projects/igniteui-angular/src/lib/slider/slider.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/slider/slider.component.spec.ts
@@ -638,6 +638,7 @@ describe('IgxSlider', () => {
         it('tick marks(steps) should be shown equally spread based on labels length', () => {
             const ticks = fixture.nativeElement.querySelector('.igx-slider__track-ticks');
             const sliderWidth = parseInt(fixture.nativeElement.querySelector('igx-slider').clientWidth, 10);
+            fixture.detectChanges();
 
             expect(slider.type).toBe(SliderType.SLIDER);
             expect(ticks).toBeDefined();
@@ -922,6 +923,7 @@ describe('IgxSlider', () => {
         it('tick marks(steps) should be shown equally spread based on labels length', () => {
             const ticks = fixture.nativeElement.querySelector('.igx-slider__track-ticks');
             const sliderWidth = parseInt(fixture.nativeElement.querySelector('igx-slider').clientWidth, 10);
+            fixture.detectChanges();
 
             expect(slider.type).toBe(SliderType.RANGE);
             expect(ticks).not.toBeNull();
diff --git a/projects/igniteui-angular/src/lib/slider/slider.component.ts b/projects/igniteui-angular/src/lib/slider/slider.component.ts
index 634a1daa269..f156062f60b 100644
--- a/projects/igniteui-angular/src/lib/slider/slider.component.ts
+++ b/projects/igniteui-angular/src/lib/slider/slider.component.ts
@@ -51,12 +51,7 @@ let NEXT_ID = 0;
 @Component({
     providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IgxSliderComponent, multi: true }],
     selector: 'igx-slider',
-    templateUrl: 'slider.component.html',
-    styles: [`
-        :host {
-            display: block;
-        }
-    `]
+    templateUrl: 'slider.component.html'
 })
 export class IgxSliderComponent implements
     ControlValueAccessor,