diff --git a/docs/docs/animations/withRepeat.mdx b/docs/docs/animations/withRepeat.mdx
index 82aede5a78a..105734e0f36 100644
--- a/docs/docs/animations/withRepeat.mdx
+++ b/docs/docs/animations/withRepeat.mdx
@@ -71,6 +71,10 @@ A function called on animation complete. In case the animation is cancelled, the
A parameter that determines how the animation responds to the device's reduced motion accessibility setting.
+import { useRepeatPlayground } from '@site/src/components/InteractivePlayground';
+
+
+
### Returns
`withRepeat` returns an [animation object](/docs/fundamentals/glossary#animation-object) which holds the current state of the animation. It can be either assigned directly to a [shared value](/docs/fundamentals/glossary#shared-value) or can be used as a value for a style object returned from [useAnimatedStyle](docs/core/useAnimatedStyle).
diff --git a/docs/src/components/InteractivePlayground/index.tsx b/docs/src/components/InteractivePlayground/index.tsx
index 8894a0ecb2c..f4b35d1a268 100644
--- a/docs/src/components/InteractivePlayground/index.tsx
+++ b/docs/src/components/InteractivePlayground/index.tsx
@@ -10,6 +10,7 @@ import ReducedMotionWarning from '../ReducedMotionWarning';
import useClampPlayground from './useClampPlayground';
import useSpringPlayground from './useSpringPlayground';
import useTimingPlayground from './useTimingPlayground';
+import useRepeatPlayground from './useRepeatPlayground';
import useInterpolateColorPlayground from './useInterpolateColorPlayground';
import useAnimatedSensorPlayground from './useAnimatedSensorPlayground';
import useDecayPlayground from './useDecayPlayground';
@@ -30,6 +31,7 @@ export {
useClampPlayground,
useSpringPlayground,
useTimingPlayground,
+ useRepeatPlayground,
useInterpolateColorPlayground,
useAnimatedSensorPlayground,
useDecayPlayground,
@@ -136,6 +138,7 @@ interface RangeProps {
step?: number;
value: number;
onChange: Dispatch;
+ disabled?: boolean;
label: string;
}
@@ -161,6 +164,18 @@ const RangeStyling = {
},
};
+const DisabledRangeStyling = {
+ color: 'var(--swm-interactive-slider)', // color of the main path of slider
+ '& .MuiSlider-thumb': {
+ backgroundColor: '#ccc', //color of thumb
+ transform: 'translate(-50%, -40%)',
+ },
+ '& .MuiSlider-rail': {
+ color: 'var(--swm-interactive-slider-rail)', //color of the rail (remaining area of slider)
+ opacity: 1,
+ },
+};
+
const TextFieldStyling = {
minWidth: 88,
'& .MuiInputBase-input': {
@@ -179,16 +194,18 @@ export function Range({
max,
value,
onChange,
+ disabled,
label,
step = 1,
}: RangeProps) {
return (
<>