[Bug]: Slider height remains static/ flex-grow is not taken into account

[RivaIvanova]

Which component(s) are affected?

Slider (single/range)

Description

The height of the igc-slider and igx-slider differ when used in the same scenario.

Reproduction

1. Use the igniteui-angular dev demos where the two sliders are compared http://localhost:4200/slider-showcase
2. Add 2-3 sliders inside the <article>

Result: Each igx-slider has a height of 100px. Each igc-slider has a height of 48px. I assume the Angular behavior is the expected one due to the flex-grow: 1 rule?

<strong>Angular Slider</strong>
<article class="sample-item">
    <igx-slider ...></igx-slider>
    <igx-slider ...></igx-slider>
    <igx-slider ...></igx-slider>
</article>
<strong>WC Slider</strong>
<article class="sample-item">
    <igc-slider ...></igc-slider>
    <igc-slider ...></igc-slider>
    <igc-slider ...></igc-slider>
</article>

.sample-item {
    display: flex;
    flex-direction: column;
    height: 300px;
}

Workaround

Applying the [part~='base'] CSS rules on the igc-slider itself.

Is this a regression?

No or unsure. This never worker, or I haven't tried before.

Affected versions

any

Browser/OS/Node environment

N/A

[desig9stein]

@simeonoff @sdimchevski @SisIvanova I don’t think we should apply flex-grow: 1 on the host element. Doing so forces a layout behavior the consumer may not want, and it only has an effect when the slider is placed inside a flex or grid container. In other words, we would be implicitly dictating how the component behaves within a layout, rather than letting the user control it.

My view is that instead of adding flex-grow to the Web Component, we should actually remove it from the Angular component as well. This keeps layout decisions in the hands of the consumer and avoids unintended behavior.

[sdimchevski]

I also believe we should not add flex-grow to the Web Component’s host element. Doing so would implicitly dictate how the component behaves inside flex/grid layouts and could create unexpected sizing behavior for consumers.

Instead, for consistency and predictable behavior across frameworks, we should remove the flex-grow behavior from the Angular igx-slider as well. This keeps layout control fully in the hands of the application developer and avoids components imposing external layout constraints.