diff --git a/src/common/Slider/Slider.js b/src/common/Slider/Slider.js
index 19f70a897..3f2a9be2f 100644
--- a/src/common/Slider/Slider.js
+++ b/src/common/Slider/Slider.js
@@ -115,7 +115,9 @@ const Slider = ({ className, value, minimumValue, maximumValue, onSlide, onCompl
                 <div className={styles['track-before']} style={{ width: `calc(100% * ${thumbPosition})` }} />
             </div>
             <div className={styles['layer']}>
-                <div className={styles['thumb']} style={{ marginLeft: `calc(100% * ${thumbPosition})` }} />
+                <svg className={styles['thumb']} style={{ marginLeft: `calc(100% * ${thumbPosition})` }} viewBox={'0 0 100 100'}>
+                    <circle cx={'50'} cy={'50'} r={'50'} />
+                </svg>
             </div>
         </div>
     );
diff --git a/src/common/Slider/styles.less b/src/common/Slider/styles.less
index 631a0240d..923ba529c 100644
--- a/src/common/Slider/styles.less
+++ b/src/common/Slider/styles.less
@@ -9,7 +9,6 @@ html.active-slider-within {
 .slider-container {
     position: relative;
     z-index: 0;
-    overflow: visible;
     cursor: pointer;
 
     .layer {
@@ -37,10 +36,10 @@ html.active-slider-within {
     }
 
     .thumb {
+        flex: none;
         width: var(--thumb-size);
         height: var(--thumb-size);
-        border-radius: 50%;
         transform: translateX(-50%);
-        background-color: var(--thumb-color);
+        fill: var(--thumb-color);
     }
 }
\ No newline at end of file