diff --git a/src/definitions/modules/slider.less b/src/definitions/modules/slider.less
index 4bcd07dc45..6697d28135 100644
--- a/src/definitions/modules/slider.less
+++ b/src/definitions/modules/slider.less
@@ -232,6 +232,14 @@
                 top: auto;
                 bottom: 100%;
             }
+            & when (@variationSliderUiLabel) {
+                .ui.labeled.slider.bottom.aligned .labels .ui.label {
+                    margin-bottom: -@uiLabelMargin;
+                }
+                .ui.labeled.ticked.slider.bottom.aligned .labels .ui.label::after {
+                    margin-bottom: @uiLabelMargin;
+                }
+            }
         }
         .ui.labeled.ticked.slider > .labels .halftick.label::after {
             height: (@labelHeight / 2);
@@ -242,6 +250,17 @@
             }
         }
     }
+    & when (@variationSliderUiLabel) {
+        .ui.labeled.slider:not(.vertical):not(.bottom) .labels .ui.label {
+            margin-top: -@uiLabelMargin;
+        }
+        .ui.labeled.ticked.slider:not(.vertical):not(.bottom) .labels .ui.label::after {
+            margin-top: @uiLabelMargin;
+        }
+        .ui.labeled.ticked.slider:not(.vertical) > .labels .ui.label::after {
+            height: @uiLabelTickHeight;
+        }
+    }
 
     & when (@variationSliderVertical) {
         /* Vertical Labels */
@@ -279,6 +298,11 @@
                 transform: translate(-100%, 50%);
             }
         }
+        & when (@variationSliderUiLabel) {
+            .ui.labeled.ticked.vertical.slider:not(.right) > .labels .ui.label::after {
+                margin-left: @verticalUiLabelMargin;
+            }
+        }
         & when (@variationSliderRightAligned) {
             .ui.labeled.vertical.right.aligned.slider > .labels {
                 transform: translateX(50%);
@@ -301,6 +325,11 @@
                     transform: translate(100%, 50%);
                 }
             }
+            & when (@variationSliderUiLabel) {
+                .ui.labeled.ticked.vertical.right.aligned.slider > .labels .ui.label::after {
+                    margin-right: @verticalUiLabelMargin;
+                }
+            }
         }
     }
 }
diff --git a/src/themes/default/globals/variation.variables b/src/themes/default/globals/variation.variables
index dddb3d26af..bbb5758c5a 100644
--- a/src/themes/default/globals/variation.variables
+++ b/src/themes/default/globals/variation.variables
@@ -716,6 +716,7 @@
 @variationSliderHighlight: true;
 @variationSliderBottomAligned: true;
 @variationSliderRightAligned: true;
+@variationSliderUiLabel: true;
 @variationSliderSizes: small, large, big;
 @variationSliderColors: @variationAllColors;
 
diff --git a/src/themes/default/modules/slider.variables b/src/themes/default/modules/slider.variables
index 8f83dcf334..523863ee4f 100644
--- a/src/themes/default/modules/slider.variables
+++ b/src/themes/default/modules/slider.variables
@@ -60,6 +60,7 @@
 /* Vertical */
 @verticalPadding: 0.5em 1em;
 @verticalTickDistance: 0.6em;
+@verticalUiLabelMargin: 0.3em;
 
 /* Labeled */
 @labelHeight: @height;
@@ -67,6 +68,8 @@
 @labelColor: @background;
 @labelPadding: 0.2em 0;
 @invertedLabelColor: @invertedBackground;
+@uiLabelMargin: 0.5em;
+@uiLabelTickHeight: 2em;
 
 /* Hover */
 @hoverVarOpacity: 0;