Adding the converged Slider component to react-components

[czearing]

Pull request checklist

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

Description of changes

Adding the converged Slider from react-slider to react-components.

[fabricteam]

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	164.294 kB 46.879 kB
react-components react-components: FluentProvider & webLightTheme	36.258 kB 11.596 kB

_{🤖 This report was generated against 9086aca21bc6a725e459a923186f23d31cd85cbd}

[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 c2b26fa:

Sandbox	Source
Fluent UI React Starter	Configuration

[size-auditor]

Asset size changes

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

Baseline commit: 9086aca21bc6a725e459a923186f23d31cd85cbd (build)

[fabricteam]

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	1038	1020	5000
BaseButton	mount	1041	1019	5000
Breadcrumb	mount	2757	2752	1000
ButtonNext	mount	517	491	5000
Checkbox	mount	1701	1732	5000
CheckboxBase	mount	1408	1451	5000
ChoiceGroup	mount	5221	5132	5000
ComboBox	mount	1026	1043	1000
CommandBar	mount	10883	10777	1000
ContextualMenu	mount	6877	7061	1000
DefaultButton	mount	1228	1206	5000
DetailsRow	mount	4180	4156	5000
DetailsRowFast	mount	3957	4140	5000
DetailsRowNoStyles	mount	3892	3785	5000
Dialog	mount	2668	2584	1000
DocumentCardTitle	mount	165	170	1000
Dropdown	mount	3541	3524	5000
FluentProviderNext	mount	7418	7475	5000
FluentProviderWithTheme	mount	330	350	10
FluentProviderWithTheme	virtual-rerender	97	102	10
FluentProviderWithTheme	virtual-rerender-with-unmount	486	480	10
FocusTrapZone	mount	1840	1953	5000
FocusZone	mount	1920	1860	5000
IconButton	mount	1994	1982	5000
Label	mount	394	370	5000
Layer	mount	3284	3309	5000
Link	mount	517	502	5000
MakeStyles	mount	1859	1883	50000
MenuButton	mount	1649	1642	5000
MessageBar	mount	2228	2125	5000
Nav	mount	3503	3693	1000
OverflowSet	mount	1168	1157	5000
Panel	mount	2528	2510	1000
Persona	mount	894	891	1000
Pivot	mount	1532	1487	1000
PrimaryButton	mount	1381	1361	5000
Rating	mount	8400	8689	5000
SearchBox	mount	1482	1444	5000
Shimmer	mount	2709	2823	5000
Slider	mount	2034	2045	5000
SpinButton	mount	5474	5305	5000
Spinner	mount	456	455	5000
SplitButton	mount	3345	3414	5000
Stack	mount	554	559	5000
StackWithIntrinsicChildren	mount	1708	1688	5000
StackWithTextChildren	mount	4954	5014	5000
SwatchColorPicker	mount	10871	10857	5000
Tabs	mount	1517	1463	1000
TagPicker	mount	2844	2790	5000
TeachingBubble	mount	13678	13732	5000
Text	mount	466	477	5000
TextField	mount	1528	1487	5000
ThemeProvider	mount	1219	1196	5000
ThemeProvider	virtual-rerender	596	603	5000
ThemeProvider	virtual-rerender-with-unmount	1959	2008	5000
Toggle	mount	884	845	5000
buttonNative	mount	120	123	5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AccordionMinimalPerf.default	208	186	1.12:1
AttachmentMinimalPerf.default	207	187	1.11:1
ButtonMinimalPerf.default	205	184	1.11:1
MenuMinimalPerf.default	1025	922	1.11:1
TreeWith60ListItems.default	207	187	1.11:1
SegmentMinimalPerf.default	453	410	1.1:1
SkeletonMinimalPerf.default	454	412	1.1:1
AvatarMinimalPerf.default	224	206	1.09:1
LayoutMinimalPerf.default	449	411	1.09:1
HeaderMinimalPerf.default	462	429	1.08:1
ListWith60ListItems.default	778	722	1.08:1
AttachmentSlotsPerf.default	1263	1182	1.07:1
ChatDuplicateMessagesPerf.default	328	306	1.07:1
ListMinimalPerf.default	614	574	1.07:1
ListNestedPerf.default	649	609	1.07:1
CarouselMinimalPerf.default	515	484	1.06:1
FlexMinimalPerf.default	340	321	1.06:1
ItemLayoutMinimalPerf.default	1513	1425	1.06:1
PortalMinimalPerf.default	185	174	1.06:1
StatusMinimalPerf.default	788	745	1.06:1
DialogMinimalPerf.default	891	850	1.05:1
DividerMinimalPerf.default	436	417	1.05:1
HeaderSlotsPerf.default	955	906	1.05:1
AnimationMinimalPerf.default	493	475	1.04:1
CardMinimalPerf.default	620	597	1.04:1
InputMinimalPerf.default	1463	1409	1.04:1
DatepickerMinimalPerf.default	6308	6152	1.03:1
DropdownManyItemsPerf.default	807	782	1.03:1
LabelMinimalPerf.default	452	445	1.02:1
ListCommonPerf.default	748	735	1.02:1
LoaderMinimalPerf.default	778	764	1.02:1
MenuButtonMinimalPerf.default	1847	1805	1.02:1
ProviderMinimalPerf.default	1113	1086	1.02:1
TooltipMinimalPerf.default	1165	1144	1.02:1
AlertMinimalPerf.default	329	327	1.01:1
ChatWithPopoverPerf.default	401	396	1.01:1
RefMinimalPerf.default	276	274	1.01:1
SliderMinimalPerf.default	1765	1743	1.01:1
SplitButtonMinimalPerf.default	4702	4641	1.01:1
TableManyItemsPerf.default	2181	2150	1.01:1
TreeMinimalPerf.default	896	887	1.01:1
ButtonSlotsPerf.default	619	617	1:1
CheckboxMinimalPerf.default	3090	3088	1:1
EmbedMinimalPerf.default	4697	4703	1:1
GridMinimalPerf.default	402	401	1:1
ImageMinimalPerf.default	453	451	1:1
PopupMinimalPerf.default	624	627	1:1
ProviderMergeThemesPerf.default	1733	1725	1:1
IconMinimalPerf.default	711	713	1:1
TableMinimalPerf.default	454	454	1:1
CustomToolbarPrototype.default	4113	4095	1:1
ToolbarMinimalPerf.default	1061	1077	0.99:1
VideoMinimalPerf.default	715	725	0.99:1
ButtonOverridesMissPerf.default	1812	1845	0.98:1
FormMinimalPerf.default	494	503	0.98:1
RadioGroupMinimalPerf.default	526	535	0.98:1
ReactionMinimalPerf.default	463	471	0.98:1
TextAreaMinimalPerf.default	567	576	0.98:1
BoxMinimalPerf.default	381	391	0.97:1
DropdownMinimalPerf.default	3359	3463	0.97:1
TextMinimalPerf.default	394	407	0.97:1
ChatMinimalPerf.default	736	772	0.95:1
RosterPerf.default	1265	1343	0.94:1

[ecraig12345]

Unless there's a specific reason from partners that we need to do this, we should hold off adding any input components to react-components until the primary slot/native props API issues are fully sorted out. Sorry. 😞

[czearing]

@ecraig12345 that makes sense. The primary slot discussion would drastically change the implementation. I'll close the PR for now but we should find a direction to go in that discussion ASAP.