Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(react-slider): adjust slider thumb position #32424

Merged

Conversation

dmytrokirpa
Copy link
Contributor

@dmytrokirpa dmytrokirpa commented Aug 30, 2024

Previous Behavior

The thumb's center aligns with the start and end of the track, extending beyond the slider's boundaries.

Screen.Recording.2024-08-30.at.15.45.27.mov

New Behavior

Figma: https://www.figma.com/design/IBCBJxEbPKS7CvLHG55Wn9/branch/tHJGD8KouIEA4AZlZqjoya/Slider?m=auto&node-id=1639-10825&t=ZVseeBNM7o5IqZGg-1

The thumb remains entirely within the confines of the track at all times. When the value is set to either 0% or 100%, the distance between the edge of the track and the center of the thumb equals the radius of the inner thumb.

Screen.Recording.2024-08-30.at.13.22.11.mov

Related Issue(s)

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 30, 2024

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: entire library
1.1 MB
272.008 kB
1.101 MB
272.239 kB
489 B
231 B
react-slider
Slider
37.169 kB
12.538 kB
37.658 kB
12.735 kB
489 B
197 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
69.14 kB
20.137 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
218.317 kB
63.258 kB
react-components
react-components: FluentProvider & webLightTheme
44.447 kB
14.59 kB
react-portal-compat
PortalCompatProvider
8.39 kB
2.64 kB
react-timepicker-compat
TimePicker
107.387 kB
35.758 kB
🤖 This report was generated against 77b26ef9652591c4e4bbc35bbd8964c0dd2750a3

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 30, 2024

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
FluentProviderWithTheme virtual-rerender 41 36 10 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 648 618 5000
Button mount 296 311 5000
Field mount 1178 1148 5000
FluentProvider mount 742 755 5000
FluentProviderWithTheme mount 83 103 10
FluentProviderWithTheme virtual-rerender 41 36 10 Possible regression
FluentProviderWithTheme virtual-rerender-with-unmount 86 83 10
MakeStyles mount 886 862 50000
Persona mount 1812 1738 5000
SpinButton mount 1429 1428 5000
SwatchPicker mount 1705 1681 5000

@dmytrokirpa dmytrokirpa marked this pull request as ready for review September 2, 2024 07:00
@dmytrokirpa dmytrokirpa force-pushed the feat/adjust-slider-thumb-position branch from a0ff80e to 8cde52c Compare September 2, 2024 15:36
@dmytrokirpa dmytrokirpa requested a review from a team as a code owner September 10, 2024 08:03
@dmytrokirpa dmytrokirpa marked this pull request as draft October 15, 2024 11:39
Copy link

github-actions bot commented Nov 11, 2024

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: entire library
1.162 MB
291.015 kB
1.162 MB
291.111 kB
351 B
96 B
react-slider
Slider
37.169 kB
12.538 kB
37.52 kB
12.621 kB
351 B
83 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
69.21 kB
20.174 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
220.616 kB
63.902 kB
react-components
react-components: FluentProvider & webLightTheme
44.447 kB
14.59 kB
react-portal-compat
PortalCompatProvider
8.39 kB
2.64 kB
react-timepicker-compat
TimePicker
107.376 kB
35.759 kB
🤖 This report was generated against 4046b33a9251b5e1c90b052f633a0b4fad46b7c6

Copy link

Pull request demo site: URL

@dmytrokirpa dmytrokirpa force-pushed the feat/adjust-slider-thumb-position branch from c124f4f to e3c304f Compare November 12, 2024 13:52
@dmytrokirpa dmytrokirpa requested review from micahgodbolt and a team and removed request for a team and micahgodbolt November 12, 2024 13:52
@dmytrokirpa dmytrokirpa marked this pull request as ready for review November 12, 2024 13:56
@tudorpopams tudorpopams removed the request for review from Hotell November 13, 2024 13:03
@dmytrokirpa dmytrokirpa enabled auto-merge (squash) November 13, 2024 13:44
@dmytrokirpa dmytrokirpa merged commit bb568eb into microsoft:master Nov 13, 2024
16 checks passed
@dmytrokirpa dmytrokirpa deleted the feat/adjust-slider-thumb-position branch November 13, 2024 14:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Feature]: Slider improvements
4 participants