From df41a5807abf92c68a25a101e14018246b9692ab Mon Sep 17 00:00:00 2001
From: Valentyna <vkozlova@microsoft.com>
Date: Mon, 20 Jan 2025 12:27:53 +0100
Subject: [PATCH] Added story with customized slider

---
 .../src/Slider/SliderCustomized.stories.tsx   | 47 +++++++++++++++++++
 .../stories/src/Slider/index.stories.tsx      |  1 +
 2 files changed, 48 insertions(+)
 create mode 100644 packages/react-components/react-slider/stories/src/Slider/SliderCustomized.stories.tsx

diff --git a/packages/react-components/react-slider/stories/src/Slider/SliderCustomized.stories.tsx b/packages/react-components/react-slider/stories/src/Slider/SliderCustomized.stories.tsx
new file mode 100644
index 00000000000000..532481df1b7586
--- /dev/null
+++ b/packages/react-components/react-slider/stories/src/Slider/SliderCustomized.stories.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { useId, Label, Slider, makeStyles, sliderCSSVars, tokens } from '@fluentui/react-components';
+
+const { sliderProgressColorVar, sliderRailColorVar, sliderThumbColorVar, sliderThumbSizeVar } = sliderCSSVars;
+
+const useStyles = makeStyles({
+  enabled: {
+    [sliderProgressColorVar]: '#ff0764',
+    [sliderRailColorVar]: tokens.colorNeutralForeground1,
+    [sliderThumbColorVar]: '#ff0764',
+    ':hover': {
+      [sliderThumbColorVar]: '#d60d58',
+      [sliderProgressColorVar]: '#d60d58',
+      ':active': {
+        [sliderThumbColorVar]: '#b91150',
+        [sliderProgressColorVar]: '#b91150',
+      },
+    },
+  },
+  thumb: {
+    [sliderThumbSizeVar]: '16px',
+    boxShadow: `0 0 0 calc(var(${sliderThumbSizeVar}) * .2) ${tokens.colorTransparentBackground} inset`,
+    '::before': {
+      content: 'unset',
+    },
+  },
+});
+
+export const Customized = () => {
+  const id = useId();
+  const styles = useStyles();
+
+  return (
+    <>
+      <Label htmlFor={id}>Customized slider</Label>
+      <Slider className={styles.enabled} thumb={{ className: styles.thumb }} defaultValue={20} size="small" id={id} />
+    </>
+  );
+};
+
+Customized.parameters = {
+  docs: {
+    description: {
+      story: 'Customized slider using its variables',
+    },
+  },
+};
diff --git a/packages/react-components/react-slider/stories/src/Slider/index.stories.tsx b/packages/react-components/react-slider/stories/src/Slider/index.stories.tsx
index 6682087de62ded..22c240f8b20672 100644
--- a/packages/react-components/react-slider/stories/src/Slider/index.stories.tsx
+++ b/packages/react-components/react-slider/stories/src/Slider/index.stories.tsx
@@ -11,6 +11,7 @@ export { Step } from './SliderStep.stories';
 export { MinMax } from './SliderMinMax.stories';
 export { Vertical } from './SliderVertical.stories';
 export { Disabled } from './SliderDisabled.stories';
+export { Customized } from './SliderCustomized.stories';
 
 export default {
   title: 'Components/Slider',