(react-slider) - Addressing a visual bug related to origin and snapping

[czearing]

Pull request checklist

• Addresses an existing issue: Fixes Slider Convergence #18886
• Include a change request file using $ yarn change

Description of changes

Fixing a visual bug in the converged Slider component related to origin. With the new snapping behavior and transition, the track's origin was affected and creates a visible jump when releasing the cursor. This is due to the left CSS property not animating in sync with the width. This is fixed by checking if the origin prop is provided and if so including left in the transition

[fabricteam]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-slider Slider	29.029 kB 9.131 kB	29.002 kB 9.123 kB	27 B 8 B

_{🤖 This report was generated against ecc79efaeaf9bf8b3164d64eaf3610918c4e8624}

[size-auditor]

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: ecc79efaeaf9bf8b3164d64eaf3610918c4e8624 (build)

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit d5f9ee8:

Sandbox	Source
Fluent UI React Starter	Configuration

[fabricteam]

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	902	894	5000
BaseButton	mount	918	869	5000
Breadcrumb	mount	2608	2614	1000
ButtonNext	mount	453	439	5000
Checkbox	mount	1527	1490	5000
CheckboxBase	mount	1297	1287	5000
ChoiceGroup	mount	4707	4708	5000
ComboBox	mount	980	990	1000
CommandBar	mount	10277	10256	1000
ContextualMenu	mount	6253	6309	1000
DefaultButton	mount	1162	1148	5000
DetailsRow	mount	3730	3744	5000
DetailsRowFast	mount	3690	3728	5000
DetailsRowNoStyles	mount	3499	3541	5000
Dialog	mount	2151	2138	1000
DocumentCardTitle	mount	134	138	1000
Dropdown	mount	3286	3285	5000
FluentProviderNext	mount	7410	7381	5000
FocusTrapZone	mount	1796	1790	5000
FocusZone	mount	1831	1771	5000
IconButton	mount	1780	1732	5000
Label	mount	343	341	5000
Layer	mount	1793	1772	5000
Link	mount	456	475	5000
MakeStyles	mount	1845	1837	50000
MenuButton	mount	1465	1449	5000
MessageBar	mount	2023	2011	5000
Nav	mount	3185	3250	1000
OverflowSet	mount	1092	1111	5000
Panel	mount	1363	2111	1000
Persona	mount	824	857	1000
Pivot	mount	1406	1411	1000
PrimaryButton	mount	1300	1258	5000
Rating	mount	7675	7562	5000
SearchBox	mount	1301	1346	5000
Shimmer	mount	2483	2494	5000
Slider	mount	1945	1937	5000
SpinButton	mount	4971	4942	5000
Spinner	mount	437	434	5000
SplitButton	mount	3151	3143	5000
Stack	mount	496	497	5000
StackWithIntrinsicChildren	mount	1547	1545	5000
StackWithTextChildren	mount	4509	4420	5000
SwatchColorPicker	mount	10246	10195	5000
Tabs	mount	1388	1412	1000
TagPicker	mount	2580	2555	5000
TeachingBubble	mount	11868	11918	5000
Text	mount	418	440	5000
TextField	mount	1356	1343	5000
ThemeProvider	mount	1216	1208	5000
ThemeProvider	virtual-rerender	610	598	5000
Toggle	mount	785	809	5000
buttonNative	mount	120	115	5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
TreeWith60ListItems.default	185	170	1.09:1
FormMinimalPerf.default	404	374	1.08:1
ButtonMinimalPerf.default	178	166	1.07:1
LabelMinimalPerf.default	401	380	1.06:1
ListNestedPerf.default	574	541	1.06:1
SegmentMinimalPerf.default	360	340	1.06:1
TableMinimalPerf.default	416	393	1.06:1
AlertMinimalPerf.default	272	260	1.05:1
AttachmentMinimalPerf.default	159	151	1.05:1
ImageMinimalPerf.default	385	366	1.05:1
ReactionMinimalPerf.default	385	367	1.05:1
AvatarMinimalPerf.default	191	184	1.04:1
DividerMinimalPerf.default	362	348	1.04:1
HeaderMinimalPerf.default	352	340	1.04:1
AnimationMinimalPerf.default	407	394	1.03:1
AttachmentSlotsPerf.default	1082	1052	1.03:1
CardMinimalPerf.default	555	538	1.03:1
DialogMinimalPerf.default	762	739	1.03:1
DropdownManyItemsPerf.default	681	664	1.03:1
LoaderMinimalPerf.default	710	686	1.03:1
ProviderMinimalPerf.default	1017	991	1.03:1
StatusMinimalPerf.default	682	663	1.03:1
IconMinimalPerf.default	630	610	1.03:1
TextMinimalPerf.default	350	341	1.03:1
CarouselMinimalPerf.default	455	448	1.02:1
ChatMinimalPerf.default	665	651	1.02:1
SkeletonMinimalPerf.default	348	342	1.02:1
VideoMinimalPerf.default	633	622	1.02:1
ButtonSlotsPerf.default	562	554	1.01:1
DatepickerMinimalPerf.default	5519	5444	1.01:1
DropdownMinimalPerf.default	3144	3114	1.01:1
EmbedMinimalPerf.default	4127	4104	1.01:1
FlexMinimalPerf.default	282	280	1.01:1
GridMinimalPerf.default	327	324	1.01:1
InputMinimalPerf.default	1262	1249	1.01:1
ListCommonPerf.default	633	626	1.01:1
ListMinimalPerf.default	509	506	1.01:1
PopupMinimalPerf.default	598	593	1.01:1
RadioGroupMinimalPerf.default	448	443	1.01:1
TextAreaMinimalPerf.default	496	492	1.01:1
TooltipMinimalPerf.default	1019	1010	1.01:1
BoxMinimalPerf.default	340	339	1:1
ChatWithPopoverPerf.default	347	346	1:1
CheckboxMinimalPerf.default	2748	2761	1:1
HeaderSlotsPerf.default	742	741	1:1
MenuMinimalPerf.default	836	836	1:1
ProviderMergeThemesPerf.default	1707	1711	1:1
SliderMinimalPerf.default	1563	1570	1:1
SplitButtonMinimalPerf.default	4120	4106	1:1
TableManyItemsPerf.default	1893	1886	1:1
CustomToolbarPrototype.default	3920	3912	1:1
AccordionMinimalPerf.default	148	150	0.99:1
ItemLayoutMinimalPerf.default	1195	1207	0.99:1
RefMinimalPerf.default	230	233	0.99:1
ToolbarMinimalPerf.default	935	944	0.99:1
ButtonOverridesMissPerf.default	1694	1734	0.98:1
ChatDuplicateMessagesPerf.default	291	296	0.98:1
LayoutMinimalPerf.default	355	363	0.98:1
MenuButtonMinimalPerf.default	1604	1631	0.98:1
RosterPerf.default	1146	1168	0.98:1
TreeMinimalPerf.default	777	789	0.98:1
PortalMinimalPerf.default	176	182	0.97:1
ListWith60ListItems.default	620	652	0.95:1