Same instances of calcite slider appear to have different rendered size

[minhiu]

Check existing issues

• [X] I have checked for existing issues to avoid duplicates

Actual Behavior

I have multiple same instances of Calcite Slider element, however, they appear to be different in block-size:

As we can see, the two sliders highlighted in red boxes appear to be slightly smaller, even though all sliders are the same instances of Calcite Slider.

Expected Behavior

All sliders should appear to have the same size

Reproduction Sample

https://codepen.io/Hieu-Pham-the-animator/pen/Jjxdjma?editors=1000

Reproduction Steps

Changing the browser's zoom level will also change the rendered size of the sliders randomly.

Reproduction Version

1.9.2

Relevant Info

No response

Regression?

No response

Priority impact

p4 - not time sensitive

Impact

No response

Calcite package

• [X] @esri/calcite-components
• [ ] @esri/calcite-components-react
• [ ] @esri/calcite-design-tokens
• [ ] @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Business/Community Analyst

[jcfranco]

Thanks for reporting this.

I believe this is expected since we're using rems to size the slider track (as well as other parts). Due to how rems are calculated, it is expected that some calculated values might be fractional and depending on user's hardware, this might cause some differences in rendering (FWIW, this isn't observable in Retina displays).

[geospatialem]

Will revisit once the token effort is completed in https://github.com/Esri/calcite-design-system/issues/7180, targeted for next month (December).

[jcfranco]

Adding to @geospatialem's comment, component tokens will use pixels (vs rems as the slider currently does), so multiple component instances would render consistently. cc @alisonailea