diff --git a/packages/design-system/src/Slider.stories.tsx b/packages/design-system/src/Slider.stories.tsx
index 327278d..395d625 100644
--- a/packages/design-system/src/Slider.stories.tsx
+++ b/packages/design-system/src/Slider.stories.tsx
@@ -51,6 +51,8 @@ export const Compact = () => {
         min={-5}
         max={5}
         step={0.3}
+        data={{ cy: 'slider-cy', test: 'slider-test' }}
+        dataThumb={{ cy: 'slider-thumb-cy', test: 'slider-thumb-test' }}
       />
       <div>Slider value: {value}</div>
     </div>
diff --git a/packages/design-system/src/Slider.tsx b/packages/design-system/src/Slider.tsx
index 8fa9f56..ce9b373 100644
--- a/packages/design-system/src/Slider.tsx
+++ b/packages/design-system/src/Slider.tsx
@@ -6,10 +6,6 @@ import { twMerge } from 'tailwind-merge'
 
 interface SliderProps {
   id?: string
-  data?: {
-    cy?: string
-    test?: string
-  }
   value?: number
   handleChange: (newValue: number) => void
   defaultValue?: number
@@ -29,6 +25,10 @@ interface SliderProps {
     thumb?: string
     lock?: string
   }
+  data?: {
+    cy?: string
+    test?: string
+  }
   dataThumb?: {
     cy?: string
     test?: string
@@ -73,7 +73,6 @@ export interface SliderWithIconsProps extends SliderProps {
  */
 export function Slider({
   id,
-  data,
   value,
   labels,
   handleChange,
@@ -87,6 +86,8 @@ export function Slider({
   rangeColorMap,
   borderColorMap,
   className,
+  data,
+  dataThumb,
 }: SliderWithLabelProps | SliderWithIconsProps): React.ReactElement {
   const steps =
     min < 0 && max > 0
@@ -165,8 +166,8 @@ export function Slider({
             : borderColorMap[String(value)],
           className?.thumb
         )}
-        data-cy={data?.cy}
-        data-test={data?.test}
+        data-cy={dataThumb?.cy}
+        data-test={dataThumb?.test}
       >
         {disabled && (
           <FontAwesomeIcon