Use real LESS power by factorizing the rzslider element.

src/rzslider.less

@@ -6,7 +6,6 @@
  *
  * Licensed under the MIT license
  */
-
 @import 'variables.less';
 
 rzslider {
@@ -29,120 +28,120 @@ rzslider {
       background-color: @handleDisabledColor;
     }
   }
-}
 
-rzslider span {
-  white-space: nowrap;
-  position: absolute;
-  display: inline-block;
-}
+  span {
+    white-space: nowrap;
+    position: absolute;
+    display: inline-block;
 
-rzslider span.rz-base {
-  width: 100%;
-  height: 100%;
-  padding: 0;
-}
-
-rzslider span.rz-bar-wrapper {
-  left: 0;
-  box-sizing: border-box;
-  margin-top: -@handleSize / 2;
-  padding-top: @handleSize / 2;
-  width: 100%;
-  height: @handleSize;
-  z-index: 1;
-}
+    &.rz-base {
+      width: 100%;
+      height: 100%;
+      padding: 0;
+    }
 
-rzslider span.rz-bar {
-  left: 0;
-  width: 100%;
-  height: @barHeight;
-  z-index: 1;
-  background: @barNormalColor;
-  .rounded(@barHeight/2);
-}
-
-rzslider span.rz-bar.rz-selection {
-  z-index: 2;
-  background: @barFillColor;
-  .rounded(@barHeight/2);
-}
-
-rzslider span.rz-pointer {
-  cursor: pointer;
-  width: @handleSize;
-  height: @handleSize;
-  top: -@handleSize/2 + @barHeight/2;
-  background-color: @handleBgColor;
-  z-index: 3;
-  .rounded(@handleSize/2);
-  //  -webkit-transition:all linear 0.15s;
-  //  -moz-transition:all linear 0.15s;
-  //  -o-transition:all linear 0.15s;
-  //  transition:all linear 0.15s;
-}
-
-rzslider span.rz-pointer:after {
-  content: '';
-  width: @handlePointerSize;
-  height: @handlePointerSize;
-  position: absolute;
-  top: @handleSize/2 - @handlePointerSize/2;
-  left: @handleSize/2 - @handlePointerSize/2;
-  .rounded(@handlePointerSize/2);
-  background: @handleInnerColor;
-}
-
-rzslider span.rz-pointer:hover:after {
-  background-color: @handleHoverColor;
-}
-
-rzslider span.rz-pointer.rz-active:after {
-  background-color: @handleActiveColor;
-}
-
-rzslider span.rz-bubble {
-  cursor: default;
-  bottom: @handleSize/2;
-  padding: @bubblePadding;
-  color: @labelTextColor;
-}
-
-rzslider span.rz-bubble.rz-selection {
-  top: @handleSize/2;
-}
-
-rzslider span.rz-bubble.rz-limit {
-  color: @limitLabelTextColor;
-}
-
-rzslider .rz-ticks {
-  box-sizing: border-box;
-  width: 100%;
-  position: absolute;
-  left: 0;
-  top: -(@ticksHeight - @barHeight) / 2;
-  margin: 0;
-  padding: 0 (@handleSize - @ticksWidth) / 2;
-  z-index: 1;
-  list-style: none;
-  display: flex;
-  justify-content: space-between;
-
-  .tick {
-    text-align: center;
-    cursor: pointer;
-    width: @ticksWidth;
-    height: @ticksHeight;
-    background: @ticksColor;
-    border-radius: 50%;
-    &.selected {
-      background: @selectedTicksColor;
+    &.rz-bar-wrapper {
+      left: 0;
+      box-sizing: border-box;
+      margin-top: -@handleSize / 2;
+      padding-top: @handleSize / 2;
+      width: 100%;
+      height: @handleSize;
+      z-index: 1;
+    }
+
+    &.rz-bar {
+      left: 0;
+      width: 100%;
+      height: @barHeight;
+      z-index: 1;
+      background: @barNormalColor;
+      .rounded(@barHeight/2);
+    }
+
+    &.rz-bar.rz-selection {
+      z-index: 2;
+      background: @barFillColor;
+      .rounded(@barHeight/2);
+    }
+
+    &.rz-pointer {
+      cursor: pointer;
+      width: @handleSize;
+      height: @handleSize;
+      top: -@handleSize/2 + @barHeight/2;
+      background-color: @handleBgColor;
+      z-index: 3;
+      .rounded(@handleSize/2);
+      //  -webkit-transition:all linear 0.15s;
+      //  -moz-transition:all linear 0.15s;
+      //  -o-transition:all linear 0.15s;
+      //  transition:all linear 0.15s;
     }
-    .tick-value {
+
+    &.rz-pointer:after {
+      content: '';
+      width: @handlePointerSize;
+      height: @handlePointerSize;
       position: absolute;
-      top: @ticksValuePosition;
-      transform: translate(-50%, 0);
+      top: @handleSize/2 - @handlePointerSize/2;
+      left: @handleSize/2 - @handlePointerSize/2;
+      .rounded(@handlePointerSize/2);
+      background: @handleInnerColor;
+    }
+
+    &.rz-pointer:hover:after {
+      background-color: @handleHoverColor;
+    }
+
+    &.rz-pointer.rz-active:after {
+      background-color: @handleActiveColor;
+    }
+
+    &.rz-bubble {
+      cursor: default;
+      bottom: @handleSize/2;
+      padding: @bubblePadding;
+      color: @labelTextColor;
+    }
+
+    &.rz-bubble.rz-selection {
+      top: @handleSize/2;
+    }
+
+    &.rz-bubble.rz-limit {
+      color: @limitLabelTextColor;
+    }
+  }
+
+  .rz-ticks {
+    box-sizing: border-box;
+    width: 100%;
+    position: absolute;
+    left: 0;
+    top: -(@ticksHeight - @barHeight) / 2;
+    margin: 0;
+    padding: 0 (@handleSize - @ticksWidth) / 2;
+    z-index: 1;
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+
+    .tick {
+      text-align: center;
+      cursor: pointer;
+      width: @ticksWidth;
+      height: @ticksHeight;
+      background: @ticksColor;
+      border-radius: 50%;
+      &.selected {
+        background: @selectedTicksColor;
+      }
+      .tick-value {
+        position: absolute;
+        top: @ticksValuePosition;
+        transform: translate(-50%, 0);
+      }
     }
   }
-}
+}
\ No newline at end of file