New min/max example

micahgodbolt · micahgodbolt · commit cf7941def174 · 2023-01-18T19:06:38.000-08:00
diff --git a/packages/react-components/react-slider/stories/Slider/SliderMinMax.stories.tsx 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
@@ -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';
 
