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)

#31985

• Fixes [Bug]: Slider design needs an update when the value is set to 10 or 90 #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]

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!

[fabricteam]

🕵🏾‍♀️ visual regressions to review in the fluentuiv9 Visual Regression Report

Avatar Converged 2 screenshots

Image Name	Diff(in Pixels)	Image Type
Avatar Converged.Badge Mask RTL.chromium.png	3	Changed
Avatar Converged.badgeMask.chromium.png	5	Changed

Drawer 2 screenshots

Image Name	Diff(in Pixels)	Image Type
Drawer.Full Overlay Dark Mode.chromium.png	991	Changed
Drawer.overlay drawer full.chromium.png	3302	Changed

Field 1 screenshots

Image Name	Diff(in Pixels)	Image Type
Field.Slider.chromium.png	279	Changed

Slider Converged 18 screenshots

Image Name	Diff(in Pixels)	Image Type
Slider Converged.Disabled Dark Mode.chromium.png	34	Changed
Slider Converged.Horizontal - 100%.chromium.png	139	Changed
Slider Converged.Disabled High Contrast.chromium.png	122	Changed
Slider Converged.Horizontal 0 RTL.chromium.png	139	Changed
Slider Converged.Disabled.chromium.png	44	Changed
Slider Converged.Disabled Vertical.chromium.png	44	Changed
Slider Converged.Root High Contrast.chromium.png	155	Changed
Slider Converged.Horizontal 100 RTL.chromium.png	139	Changed
Slider Converged.Root Dark Mode.chromium.png	64	Changed
Slider Converged.Horizontal - 0%.chromium.png	139	Changed
Slider Converged.Vertical - 0%.chromium.png	140	Changed
Slider Converged.Root.chromium.png	92	Changed
Slider Converged.Root RTL.chromium.png	92	Changed
Slider Converged.Vertical - 100%.chromium.png	140	Changed
Slider Converged.Vertical 0 RTL.chromium.png	140	Changed
Slider Converged.Vertical RTL.chromium.png	92	Changed
Slider Converged.Vertical 100 RTL.chromium.png	140	Changed
Slider Converged.Vertical.chromium.png	92	Changed

[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]

Azure Pipelines successfully started running 4 pipeline(s).

[dmytrokirpa]

• 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!

[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?