diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx
index 2dd1712d52..b7d86e7b29 100644
--- a/src/components/Slider/Slider.tsx
+++ b/src/components/Slider/Slider.tsx
@@ -24,7 +24,8 @@ export const Slider = React.forwardRef(function Slider(
marksCount = 0,
availableValues,
hasTooltip = false,
- error,
+ errorText,
+ validationState,
disabled = false,
debounceDelay = 0,
onBlur,
@@ -75,7 +76,7 @@ export const Slider = React.forwardRef(function Slider(
});
const styleModifiers = {
size,
- error: Boolean(error) && !disabled,
+ error: validationState === 'invalid' && !disabled,
disabled,
hasTooltip: Boolean(hasTooltip),
};
@@ -120,7 +121,9 @@ export const Slider = React.forwardRef(function Slider(
: undefined
}
>
- {styleModifiers.error &&
{error}
}
+ {styleModifiers.error && errorText && (
+ {errorText}
+ )}
);
});
diff --git a/src/components/Slider/__stories__/SliderShowcase.tsx b/src/components/Slider/__stories__/SliderShowcase.tsx
index c40433eb2d..7966e9a1d9 100644
--- a/src/components/Slider/__stories__/SliderShowcase.tsx
+++ b/src/components/Slider/__stories__/SliderShowcase.tsx
@@ -45,10 +45,10 @@ export const SliderShowcase = () => {
-
+
@@ -69,13 +69,13 @@ export const SliderShowcase = () => {
diff --git a/src/components/Slider/types.ts b/src/components/Slider/types.ts
index 59a940f67f..2cf798f52b 100644
--- a/src/components/Slider/types.ts
+++ b/src/components/Slider/types.ts
@@ -20,8 +20,9 @@ export type SliderProps = {
hasTooltip?: boolean;
disabled?: boolean;
- error?: string;
-
+ errorText?: string;
+ /** Describes the validation state */
+ validationState?: 'invalid';
debounceDelay?: number;
onFocus?: (e: React.FocusEvent) => void;
onBlur?: (e: React.FocusEvent) => void;
@@ -31,7 +32,7 @@ export type SliderProps = {
autoFocus?: boolean;
tabIndex?: ValueType;
- apiRef: BaseSliderRefType;
+ apiRef: React.RefObject;
} & Pick &
QAProps;