Slider handle misaligned if browser default font is adjusted

[gsoosalu]

Actual Behavior

Calcite slider's handle appears below or above the slider line:

Expected Behavior

Slider's handle should be in the middle of the line

Reproduction Sample

https://developers.arcgis.com/javascript/latest/sample-code/widgets-shadow-cast/live/

Reproduction Steps

1. Change in browser setting the font size to either small or large. Screenshot from Chrome:

2. Open JS API sample: https://developers.arcgis.com/javascript/latest/sample-code/widgets-shadow-cast/live/

3. Open color-picker

4. The opacity slider's handle is misaligned

This also appears when enabling label-handles in the Calcite storybook: https://esri.github.io/calcite-components/?path=/story/components-controls-slider--single-value

Reproduction Version

beta.82

Relevant Info

MacOS and Windows Chrome 102.0.5005.115 Firefox 101.0.1

Regression?

No response

[driskull]

Seems like the current positioning of the handle is based on a fixed offset size. That would need to change to be relative instead of fixed.

[gsoosalu]

Hi all, will this be addressed any time soon?

[geospatialem]

Hi @gsoosalu, thanks for reaching out. We plan to address to our February release.

[github-actions[bot]]

Installed and assigned for verification.

[geospatialem]

Verified on Storybook and in 1.0.8-next.1.