fix: slider label postions is a bit off

[thomleclerc]

🐛 Bug Report

Slider label positions is off. If you compare it to the documentation you have here: https://explore.fast.design/components/fast-slider , the result I'm getting is not exactly like yours.

Don't hesitate if you need more information.

💻 Repro or Code Sample

Stackblitz for reproduction : https://stackblitz.com/edit/typescript-y2ptfh?file=index.ts

🤔 Expected Behavior

The left and right position on the .root class for the slider-label should be : style="left: 20%; right: 80%;" but it'sstyle="left: 19%; right: 81%;".

😯 Current Behavior

The calculation of the right and left percentage on the .root class of the slider label seems to be off a bit. On the screenshot, the slider value is 20, but the label position is a little off and the first label is literally on the slider.

Some styling seems to be missing as well.

💁 Possible Solution

I'm willing to contribute and look for a fix. Since I'm new to programming, I might need some external eyes to help me on this journey.

🔦 Context

We are currently trying to create a new design system using mainly the components (for now) you have in you library and will edit the styling afterwards. I was trying to integrate the slider when I came across this issue. We are making a react components library which use the react wrapper and also a web components library.

PS: Some parts of the documentation seems to be contradictory when you compare it to the components explorer, the components specification pages and the .spec.md file in the repo. I could also provide some help with this if needed.

🌍 Your Environment

package.json versions : "@microsoft/fast-components": "^2.30.6", "@microsoft/fast-element": "^1.10.3", "@microsoft/fast-foundation": "^2.46.10"

OS & Device: MacOS BigSUR v11.2 Browser : Google Chrome Version 104.0.5112.101 (Official Build) (x86_64)

[EisenbergEffect]

@thomleclerc We'd love to have your contributions around this. @chrisdholt leads our components and experiences team. I'll let him chime in on how best to coordinate.

[KingOfTac]

@thomleclerc As a workaround you could try to leverage some of the styles from fluent-ui as a custom override to fast-slider and fast-slider-label's styles. https://github.com/microsoft/fluentui/blob/master/packages/web-components/src/slider/slider.styles.ts

[thomleclerc]

@KingOfTac Sounds good, i'll give it a try, thanks! I'll wait on an answer from @chrisdholt before working on a fix. Is there a better way to communicate with him than here? Discord I guess? @EisenbergEffect

[andre-gra]

@thomleclerc It's been a long time since this issue opened, but maybe someone could still be interested. I followed @KingOfTac advice and checking fluent-ui's styles I found a workaround. You can apply on sliderLabelTestStyles the style below: :host(.horizontal) { grid-row: 2 / auto; } and the correct spacing above first label appears.

I hope it can be useful to someone.

[janechu]

Unfortunately @microsoft/fast-foundation is being deprecated, refer to #6955. If this is an issue in Fluent UI slider, please file an issue there.