From cf7941def174fd5cdebc958c4998d3c242bc782a Mon Sep 17 00:00:00 2001
From: Micah Godbolt <mgodbolt@microsoft.com>
Date: Wed, 18 Jan 2023 19:06:38 -0800
Subject: [PATCH] New min/max example

---
 .../stories/Slider/SliderMinMax.stories.tsx   | 34 +++++++++++++++++++
 .../stories/Slider/index.stories.tsx          |  1 +
 2 files changed, 35 insertions(+)
 create mode 100644 packages/react-components/react-slider/stories/Slider/SliderMinMax.stories.tsx

diff --git a/packages/react-components/react-slider/stories/Slider/SliderMinMax.stories.tsx b/packages/react-components/react-slider/stories/Slider/SliderMinMax.stories.tsx
new file mode 100644
index 0000000000000..565ee558f0a7e
--- /dev/null
+++ b/packages/react-components/react-slider/stories/Slider/SliderMinMax.stories.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { useId, Label, Slider, makeStyles } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
+  wrapper: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+});
+
+export const MinMax = () => {
+  const styles = useStyles();
+  const id = useId();
+  const min = 10;
+  const max = 50;
+  return (
+    <>
+      <Label htmlFor={id}>Min/Max Example</Label>
+      <div className={styles.wrapper}>
+        <Label aria-hidden>{min}</Label>
+        <Slider min={min} max={max} defaultValue={20} id={id} />
+        <Label aria-hidden>{max}</Label>
+      </div>
+    </>
+  );
+};
+
+MinMax.parameters = {
+  docs: {
+    description: {
+      story: 'A slider with min and max values displayed',
+    },
+  },
+};
diff --git a/packages/react-components/react-slider/stories/Slider/index.stories.tsx b/packages/react-components/react-slider/stories/Slider/index.stories.tsx
index ed17c69958f1a..6682087de62de 100644
--- a/packages/react-components/react-slider/stories/Slider/index.stories.tsx
+++ b/packages/react-components/react-slider/stories/Slider/index.stories.tsx
@@ -8,6 +8,7 @@ export { Default } from './SliderDefault.stories';
 export { Size } from './SliderSize.stories';
 export { Controlled } from './SliderControlled.stories';
 export { Step } from './SliderStep.stories';
+export { MinMax } from './SliderMinMax.stories';
 export { Vertical } from './SliderVertical.stories';
 export { Disabled } from './SliderDisabled.stories';