diff --git a/packages/html/src/slider/slider-tick.tsx b/packages/html/src/slider/slider-tick.tsx
index 687dffdae0f..0d35fccfd7d 100644
--- a/packages/html/src/slider/slider-tick.tsx
+++ b/packages/html/src/slider/slider-tick.tsx
@@ -27,18 +27,21 @@ export const SliderTick = (
         label = defaultProps.label,
         orientation,
         large,
-        text
+        text,
+        ...other
     } = props;
 
     return (
-        <li className={classNames(
-            props.className,
-            SLIDER_TICK_CLASSNAME,
-            {
-                [`k-tick-${orientation}`]: orientation,
-                'k-tick-large': large
-            }
-        )} style={style} >
+        <li
+            {...other}
+            className={classNames(
+                props.className,
+                SLIDER_TICK_CLASSNAME,
+                {
+                    [`k-tick-${orientation}`]: orientation,
+                    'k-tick-large': large
+                }
+            )} style={style} >
             {label && <span className="k-label">{text}</span>}
         </li>
     );
diff --git a/packages/html/src/slider/slider.spec.tsx b/packages/html/src/slider/slider.spec.tsx
index 5685b224d00..58c9aec10a6 100644
--- a/packages/html/src/slider/slider.spec.tsx
+++ b/packages/html/src/slider/slider.spec.tsx
@@ -52,7 +52,8 @@ export const Slider = (
         focus,
         active,
         trackStyle,
-        dir
+        dir,
+        ...other
     } = props;
 
     let iconIncrease;
@@ -67,19 +68,21 @@ export const Slider = (
     }
 
     return (
-        <div className={classNames(
-            SLIDER_CLASSNAME,
-            props.className,
-            stateClassNames(SLIDER_CLASSNAME, {
-                readonly,
-                disabled
-            }),
-            {
-                [`k-slider-${orientation}`]: orientation,
-                'k-colorgradient-slider': type === 'gradient',
-                'k-range-slider': type === 'range'
-            }
-        )} dir={dir} >
+        <div
+            {...other}
+            className={classNames(
+                SLIDER_CLASSNAME,
+                props.className,
+                stateClassNames(SLIDER_CLASSNAME, {
+                    readonly,
+                    disabled
+                }),
+                {
+                    [`k-slider-${orientation}`]: orientation,
+                    'k-colorgradient-slider': type === 'gradient',
+                    'k-range-slider': type === 'range'
+                }
+            )} dir={dir} >
             { showButtons && <Button className="k-button-decrease" rounded="full" icon={iconDecrease} /> }
             <div className="k-slider-track-wrap">
                 {