feat(slider): support bottom aligned label and prevent line break

This PR encourages the slider label to appear in one line without breaking the word
into new line especially when the last label contains more than one word and break
into multiple line which make the label overlaps the slider track in some situations.

This PR also supports to change the slider label position using `bottom aligned` flag
in CSS class name which makes the label to be appeared below the slider track.

Closes: #1625

src/definitions/modules/slider.less

@@ -195,8 +195,14 @@
 
   .ui.labeled.slider > .labels .label {
     display: inline-flex;
+    padding: @labelPadding;
     position: absolute;
     transform: translate(-50%, -100%);
+    white-space: nowrap;
+  }
+
+  .ui.bottom.aligned.labeled.slider > .labels .label {
+    transform: translate(-50%, 100%);
   }
   & when (@variationSliderTicked) {
     .ui.labeled.ticked.slider > .labels .label:after {
@@ -208,6 +214,9 @@
       top: 100%;
       left: 50%;
     }
+    .ui.bottom.aligned.labeled.ticked.slider > .labels .label:after {
+      top: -100%;
+    }
     .ui.labeled.ticked.slider > .labels .halftick.label:after {
       height: @labelHeight / 2;
     }

src/themes/default/modules/slider.variables

@@ -57,6 +57,7 @@
 @labelHeight  : @height;
 @labelWidth   : 1px;
 @labelColor   : @background;
+@labelPadding : 0.2em 0;
 
 /* Hover */
 @hoverVarOpacity                 : 0;