fix(slider-v9): adjust slider design

[DevJoaoLopes]

Previous Behavior

In the slider component, when entering values ​​less than 10 or greater than 90 (thinking of a slider with min 0 and max 100), we get the impression of values ​​0 or 100, as shown in the image:

New Behavior

Adjusted height (for vertical slider) and width (for horizontal slider)

Related Issue(s)

• Fixes [Bug]: Slider design needs an update when the value is set to 10 or 90 #31985

[DevJoaoLopes]

@DevJoaoLopes please read the following Contributor License Agreement(CLA). If you agree with the CLA, please reply with the following information.

@microsoft-github-policy-service agree [company="{your company}"]

Options:

• (default - no company specified) I have sole ownership of intellectual property rights to my Submissions and I am not making Submissions in the course of work for my employer.

@microsoft-github-policy-service agree

• (when company given) I am making Submissions in the course of work for my employer (or my employer has intellectual property rights in my Submissions by contract or applicable law). I have permission from my employer to make Submissions and enter into this Agreement on behalf of my employer. By signing below, the defined term “You” includes me and my employer.

@microsoft-github-policy-service agree company="Microsoft"

Contributor License Agreement

@microsoft-github-policy-service agree

[micahgodbolt]

This design was very intentional. The center of the thumb was supposed to start/end at the beginning/end of the slider. Its worth asking design if they want to re-evaluate this design, but we can't merge this without design being on board and doing the work to update our spec.

[micahgodbolt]

I understand the request here, but this code is now how we'd fix this....adding 18% would not scale, and it'd be better to remove the code that pushes the thumb out onto the edge of the slider.

[DevJoaoLopes]

I understand the request here, but this code is now how we'd fix this....adding 18% would not scale, and it'd be better to remove the code that pushes the thumb out onto the edge of the slider.

I see, this really was the simplest way imaginable.

[DevJoaoLopes]

@micahgodbolt How would you prefer us to continue here? Wait for a design response?

[dmytrokirpa]

Hello @DevJoaoLopes, thank you for your contribution. There is an issue related to the slider improvements (#32171), and it appears that the solution proposed in this PR may not align with the design specifications.

Please feel free to reach out if you have any questions.

[DevJoaoLopes]

Hi @dmytrokirpa , agree... how can we proceed? Has the problem already been resolved? Will there be any adjustments to the component design?

[DevJoaoLopes]

The main objective was to solve the problem, but if we have another way of solving it, we can close this PR. No problem 😃