diff --git a/src/common/Slider/Slider.js b/src/common/Slider/Slider.js
index e5155bf87..2c86eeee5 100644
--- a/src/common/Slider/Slider.js
+++ b/src/common/Slider/Slider.js
@@ -14,8 +14,7 @@ class Slider extends Component {
         return nextProps.value !== this.props.value ||
             nextProps.minimumValue !== this.props.minimumValue ||
             nextProps.maximumValue !== this.props.maximumValue ||
-            nextProps.containerClassName !== this.props.containerClassName ||
-            nextProps.thumbClassName !== this.props.thumbClassName;
+            nextProps.className !== this.props.className;
     }
 
     onSlide = (...args) => {
@@ -84,23 +83,19 @@ class Slider extends Component {
     }
 
     render() {
-        const thumbStartProp = this.props.orientation === 'horizontal' ? 'marginLeft' : 'marginBottom';
+        const thumbStartProp = this.props.orientation === 'horizontal' ? 'left' : 'bottom';
         const thumbStart = (this.props.value - this.props.minimumValue) / (this.props.maximumValue - this.props.minimumValue);
         return (
-            <div className={classnames(styles['slider-container'], styles[this.props.orientation], this.props.containerClassName)} onMouseDown={this.onStartSliding}>
+            <div className={classnames(styles['slider-container'], styles[this.props.orientation], this.props.className)} onMouseDown={this.onStartSliding}>
                 <div className={styles['line']} />
-                <div
-                    className={classnames(styles['thumb'], this.props.thumbClassName)}
-                    style={{ [thumbStartProp]: `calc(100% * ${thumbStart})` }}
-                />
+                <div className={styles['thumb']} style={{ [thumbStartProp]: `calc(100% * ${thumbStart})` }} />
             </div>
         );
     }
 }
 
 Slider.propTypes = {
-    containerClassName: PropTypes.string,
-    thumbClassName: PropTypes.string,
+    className: PropTypes.string,
     value: PropTypes.number.isRequired,
     minimumValue: PropTypes.number.isRequired,
     maximumValue: PropTypes.number.isRequired,
diff --git a/src/common/Slider/styles.less b/src/common/Slider/styles.less
index 1f5e89889..fe1d9ffbb 100644
--- a/src/common/Slider/styles.less
+++ b/src/common/Slider/styles.less
@@ -2,20 +2,31 @@
 
 .slider-container {
     position: relative;
+    z-index: 0;
+    min-width: var(--thumb-size);
+    min-height: var(--thumb-size);
     cursor: pointer;
 
     .line {
         position: absolute;
+        z-index: 1;
         background-color: @colorprim;
     }
 
     .thumb {
-        border-radius: 50%;
-        background-color: @colormedium;
+        position: absolute;
+        z-index: 2;
+        width: var(--thumb-size);
+        height: var(--thumb-size);
         transition-duration: 0.06s;
 
-        &:hover {
-            background-color: @colorprimlight;
+        &::after {
+            display: block;
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            background-color: @colormedium;
+            content: "";
         }
     }
 
@@ -28,8 +39,11 @@
         }
 
         .thumb {
-            transform: translateX(-50%);
-            transition-property: margin-left;
+            transition-property: left;
+
+            &::after {
+                margin-left: calc(-0.5 * var(--thumb-size));
+            }
         }
     }
 
@@ -42,14 +56,19 @@
         }
 
         .thumb {
-            transform: translateY(50%);
-            transition-property: margin-top;
+            transition-property: bottom;
+
+            &::after {
+                margin-top: calc(0.5 * var(--thumb-size));
+            }
         }
     }
 
-    &.active {
+    &:hover, &.active {
         .thumb {
-            background-color: @colorprimlight;
+            &::after {
+                background-color: @colorprimlight;
+            }
         }
     }
 }
\ No newline at end of file