feat(Slider): make thumb position clearer when the value is set near edge

[Thulof]

Previous Behavior

The current issue is, given the slider value range is 0 to 100, when the value is set to 10 or 90, the thumb is positioned very close to the edge of the track, which could look like 0 or 100 to users.

New Behavior

With an offset, the Slider thumb is in the proper position.

Related Issue(s)

https://github.com/microsoft/fluentui/issues/31985

• Fixes #31985

[Thulof]

@microsoft-github-policy-service agree

[Thulof]

Hi, @micahgodbolt could you please help review this Pull Request? Thank you

[dmytrokirpa]

/azp run

[azure-pipelines[bot]]

Azure Pipelines successfully started running 4 pipeline(s).

[fabricteam]

📊 Bundle size report

✅ No changes found

[fabricteam]

Perf Analysis (@fluentui/react-components)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
FluentProviderWithTheme	virtual-rerender	33	40	10	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	627	641	5000
Button	mount	301	308	5000
Field	mount	1149	1101	5000
FluentProvider	mount	708	697	5000
FluentProviderWithTheme	mount	86	90	10
FluentProviderWithTheme	virtual-rerender	33	40	10	Possible regression
FluentProviderWithTheme	virtual-rerender-with-unmount	87	89	10
MakeStyles	mount	873	883	50000
Persona	mount	1791	1750	5000
SpinButton	mount	1356	1437	5000
SwatchPicker	mount	1652	1657	5000

[dmytrokirpa]

Hi @Thulof, thank you for your contribution! There are a few errors in the CI:

• Could you please address the formatting issues (prettier) in the packages/react-components/react-slider/library/src/components/Slider/useSliderState.tsx file?
• Ensure to run the build locally for the react-slider package since it updates the react-slider.api.md. If there are any changes, please commit them as well.

Thank you!

[Thulof]

Hi @Thulof, thank you for your contribution! There are a few errors in the CI:

• Could you please address the formatting issues (prettier) in the packages/react-components/react-slider/library/src/components/Slider/useSliderState.tsx file?
• Ensure to run the build locally for the react-slider package since it updates the react-slider.api.md. If there are any changes, please commit them as well.

Thank you!

OK

[dmytrokirpa]

/azp run

[azure-pipelines[bot]]

Azure Pipelines successfully started running 4 pipeline(s).

[dmytrokirpa]

• The solution proposed in the pull request is not effective for sliders with steps:

https://github.com/user-attachments/assets/d3dae059-5fcc-4177-bd06-cb2e2ab3fb74

• The design team has provided an update on the positioning of the slider thumb, as detailed in issue #32171:

@Thulof, please let me know if you are interested in addressing this issue, or I will proceed with it.

Thank you!

[Thulof]

• The solution proposed in the pull request is not effective for sliders with steps:

Screen.Recording.2024-08-09.at.15.02.39.mov

• The design team has provided an update on the positioning of the slider thumb, as detailed in issue [Feature]: Slider improvements #32171:

@Thulof, please let me know if you are interested in addressing this issue, or I will proceed with it.

Thank you!

Yes, I will be working on it.

[Thulof]

Hi @Thulof, thank you for your contribution! There are a few errors in the CI:

• Could you please address the formatting issues (prettier) in the packages/react-components/react-slider/library/src/components/Slider/useSliderState.tsx file?
• Ensure to run the build locally for the react-slider package since it updates the react-slider.api.md. If there are any changes, please commit them as well.

Thank you!

While working on these two tasks, I encountered some issues:

1. I tried running yarn prettier packages/react-components/react-slider/library/src/components/Slider/useSliderState.tsx, but it did not display any errors.
2. When I attempted to run yarn build within the react-slider directory, I encountered numerous type errors. It seems that my TSConfig is not properly recognizing the workspace. Can you please advise on the correct way to run the build process?

[dmytrokirpa]

Hello @Thulof, the commands you might be looking for are yarn nx lint react-slider and yarn nx build react-slider. Based on the screenshot you provided, it appears that the react-slider dependencies weren't built. Simply use the NX commands, and they will pre-build everything necessary for you.

Hi @Thulof, thank you for your contribution! There are a few errors in the CI:

• Could you please address the formatting issues (prettier) in the packages/react-components/react-slider/library/src/components/Slider/useSliderState.tsx file?
• Ensure to run the build locally for the react-slider package since it updates the react-slider.api.md. If there are any changes, please commit them as well.

Thank you!

While working on these two tasks, I encountered some issues:

1. I tried running yarn prettier packages/react-components/react-slider/library/src/components/Slider/useSliderState.tsx, but it did not display any errors.
2. When I attempted to run yarn build within the react-slider directory, I encountered numerous type errors. It seems that my TSConfig is not properly recognizing the workspace. Can you please advise on the correct way to run the build process?

[dmytrokirpa]

Looks like this change was made in #32424, so we can probably close this PR.