@syncfusion/ej2-inputs 25.2.6 → 26.1.35

package/styles/slider/_layout.scss

@@ -1,2471 +1,2119 @@
-@include export-module('slider-layout') {
-  /* stylelint-disable property-no-vendor-prefix */
-  // sass-lint:disable no-important
-
-  .e-control-wrapper.e-slider-container.e-material-slider .e-slider .e-handle {
-    &.e-material-handle {
-      cursor: default;
-      transition: transform .4s cubic-bezier(.25, .8, .25, 1);
-      z-index: 3;
-    }
+@mixin position($position, $top, $left) {
+  position: $position;
+  top: $top;
+  left: $left;
+}
 
-    &.e-tab-handle {
-      &::after {
-        @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-          background-color: transparent;
-        }
-      }
-    }
+@mixin size($height, $width) {
+  height: $height;
+  width: $width;
+}
 
-    &.e-handle-start.e-tab-handle {
-      &::after {
-        @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-          background-color: transparent;
-        }
-      }
-    }
+@mixin tick-position($position) {
+  @if ($skin-name == 'material' or $skin-name == 'material-dark') {
+    background-position-x: $position;
   }
+  @else {
+    background-position: $position center;
+  }
+}
 
-  .e-slider-tooltip.e-tooltip-wrap.e-popup {
-    @if ($skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3' or $skin-name == 'Material3-dark') {
-      background-color: $slider-handle-bg-color;
-      border: 0;
-      border-radius: 8px;
-      /* stylelint-disable */
-      cursor: -webkit-grab;
-      cursor: grab;
-      /* stylelint-enable */
-      opacity: 1;
-
-      &.e-popup.e-popup-close {
-        display: block;
-        opacity: 0;
-      }
+@mixin tick-background-position($position) {
+  @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+    background-position: $position center;
+  }
+  @if ($skin-name == 'material' or $skin-name == 'material-dark') {
+    background-position-x: $position;
+  }
+}
 
-      &.e-material-tooltip-start {
-        background-color: $slider-handle-border-color;
+@mixin alignment($size, $pos, $type) {
+  @if $type == 'horizontal' {
+    height: $size;
+    top: $pos;
+  }
+  @else {
+    width: $size;
+    left: $pos;
+  }
+}
 
-        @if $skin-name != 'Material3' and $skin-name != 'Material3-dark' {
-          .e-arrow-tip-inner {
-            color: $grey-black;
-            opacity: 0;
-          }
-        }
+@mixin handle-transform($ms-transform, $transform) {
+  /* stylelint-disable */
+  -ms-transform: $ms-transform;
+  -webkit-transform: $ms-transform;
+  transform: $transform;
+  /* stylelint-enable */
+}
 
-        .e-arrow-tip-outer.e-tip-bottom {
-          border-top-color: $slider-handle-border-color;
-        }
+@mixin cursor-grabbing {
+  /* stylelint-disable */
+  cursor: -webkit-grabbing;
+  cursor: grabbing;
+  /* stylelint-enable */
+}
 
-        .e-arrow-tip-outer.e-tip-top {
-          border-bottom-color: $slider-handle-border-color;
-        }
+@mixin cursor-grab {
+  /* stylelint-disable */
+  cursor: -webkit-grab;
+  cursor: grab;
+  /* stylelint-enable */
+}
 
-        .e-arrow-tip-outer.e-tip-right {
-          border-left-color: $slider-handle-border-color;
-        }
+@mixin button-style($bg-image, $size, $top, $left) {
+  .e-button-icon {
+    background-image: $bg-image;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: inline-block;
+    @include size($size, $size);
+    @include position(absolute, $top, $left);
+  }
+}
 
-        .e-arrow-tip-outer.e-tip-left {
-          border-right-color: $slider-handle-border-color;
-        }
-      }
+@mixin button-position($left, $right, $margin-top, $top) {
+  left: $left;
+  right: $right;
+  margin-top: $margin-top;
+  top: $top;
+}
 
-      &.e-tooltip-active {
-        /* stylelint-disable */
-        cursor: -webkit-grabbing;
-        cursor: grabbing;
-        /* stylelint-enable */
-      }
+@mixin v-button-position($top, $bottom, $margin-right, $right) {
+  top: $top;
+  bottom: $bottom;
+  margin-right: $margin-right;
+  right: $right;
+}
 
-      .e-arrow-tip {
-        visibility: visible;
-      }
+@mixin button-icon($color, $content, $font-size) {
+  .e-button-icon {
+    font-family: 'e-icons';
 
-      .e-tip-content {
-        background-color: transparent;
-        height: 16px;
-        overflow: hidden;
-        padding: 0 8px;
-        @if $skin-name != 'Material3' and $skin-name != 'Material3-dark' {
-          text-align: center;
-        }
-        @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3' or $skin-name == 'Material3-dark' {
-          top: calc(50% - 8px);
-          position: relative;
-          line-height: 16px;
-        }
-        @else {
-          top: calc(50% - 10px);
-          left: calc(50% - 36px);
-        }
-        width: 100%;
+    &::before {
+      color: $color;
+      content: $content;
+      font-size: $font-size;
+    }
+  }
+}
 
-        &.e-material-tooltip-show {
-          color: $slider-material-tooltip-content-color;
-        }
+@mixin bg-border($bg-color, $border) {
+  background-color: $bg-color;
+  border-color: $border;
+}
 
-        &.e-material-tooltip-hide {
-          color: transparent;
-        }
-      }
+@mixin slider-transform($rotation) {
+  transform: rotate($rotation);
+  .e-tip-content {
+    transform: rotate(-$rotation);
+  }
+}
 
-      .e-arrow-tip-inner {
-        color: $slider-handle-bg-color;
-      }
+@include export-module('slider-layout') {
+  /* stylelint-disable property-no-vendor-prefix */
 
-      .e-arrow-tip-outer.e-tip-bottom {
-        border-top-color: $slider-handle-bg-color;
-      }
+  .e-control-wrapper.e-slider-container {
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    box-sizing: border-box;
+    display: inline-block;
+    height: $slider-wrap-height;
+    line-height: normal;
+    outline: none;
+    position: relative;
+    user-select: none;
 
-      .e-arrow-tip-outer.e-tip-top {
-        border-bottom-color: $slider-handle-bg-color;
+    &.e-material-slider .e-slider .e-handle {
+      &.e-material-handle {
+        cursor: default;
+        transition: transform .4s cubic-bezier(.25, .8, .25, 1);
+        z-index: 3;
       }
-
-      .e-arrow-tip-outer.e-tip-right {
-        border-left-color: $slider-handle-bg-color;
+  
+      &.e-tab-handle,
+      &.e-handle-start.e-tab-handle {
+        &::after {
+          @if ($skin-name == 'material' or $skin-name == 'material-dark') {
+            background-color: transparent;
+          }
+        }
       }
+    }
 
-      .e-arrow-tip-outer.e-tip-left {
-        border-right-color: $slider-handle-bg-color;
+    &:hover,
+    &:active {
+      .e-scale .e-tick {
+        @if ($skin-name == 'material' or $skin-name == 'material-dark') {
+          visibility: visible;
+        }
       }
+    }
 
-      &.e-tooltip-wrap.e-popup.e-material-default {
-        background-color: $slider-handle-bg-color;
-        border: 0;
-        border-bottom-left-radius: 50%;
-        border-bottom-right-radius: 0%;
-        border-top-left-radius: 50%;
-        border-top-right-radius: 50%;
-        /* stylelint-disable */
-        cursor: -webkit-grab;
-        cursor: grab;
-        /* stylelint-enable */
-        opacity: 1;
+    &::after {
+      content: $skin-name;
+      display: none;
+    }
 
-        &.e-material-tooltip-start {
-          background-color: $slider-handle-border-color;
-        }
+    .e-slider {
+      box-sizing: border-box;
+      cursor: $slider-cursor;
+      display: block;
+      outline: 0 none;
+      padding: 0;
+      position: relative;
 
-        &.e-tooltip-active {
-          /* stylelint-disable */
-          cursor: -webkit-grabbing;
-          cursor: grabbing;
-          /* stylelint-enable */
+      .e-handle {
+        border-radius: $slider-border-radius-handle;
+        @if ($skin-name == 'tailwind' or $skin-name == 'fluent2') {
+          box-shadow: $slider-handle-box-shadow;
         }
+        box-sizing: border-box;
+        cursor: $slider-handle-hover-cursor;
+        @include size($slider-handle-height, $slider-handle-width);
+        outline: none;
+        position: absolute;
+        touch-action: none;
+        transition: left 300ms ease-out, right 300ms ease-out, bottom 300ms ease-out, transform 300ms ease-out;
+        z-index: 10;
 
-        .e-arrow-tip {
-          visibility: hidden;
+        &.e-large-thumb-size {
+          transform: scale(1.5);
         }
 
-        &.e-slider-horizontal-before {
-          transform: rotate(45deg);
-          .e-tip-content {
-            transform: rotate(-45deg);
+        &.e-handle-active {
+          @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
+            @include bg-border($slider-active-handle-bg-color, $slider-hover-handle-color);
           }
-        }
-
-        &.e-slider-horizontal-after {
-          transform: rotate(225deg);
-          .e-tip-content {
-            transform: rotate(-225deg);
+          @else if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4') {
+            @include bg-border($slider-handle-active-bg-color, $slider-handle-active-border-color);
+          }
+          @if ($skin-name == 'bootstrap4') {
+            box-shadow: $slider-handle-active-box-shadow;
+          }
+          @if ($skin-name == 'material' or $skin-name == 'material-dark') {
+            @include cursor-grabbing;
           }
         }
 
-        &.e-slider-vertical-before {
-          transform: rotate(-45deg);
-          .e-tip-content {
-            transform: rotate(45deg);
+        @if ($skin-name == 'material' or $skin-name == 'material-dark') {
+          @include cursor-grab;
+
+          &.e-handle-start {
+            background-color: $slider-handle-start-background;
+            border: $slider-start-handle-border-size;
           }
-        }
 
-        &.e-slider-vertical-after {
-          transform: rotate(-225deg);
-          .e-tip-content {
-            transform: rotate(225deg);
+          &::after {
+            -moz-box-sizing: content-box;
+            -webkit-box-sizing: content-box;
+            @include handle-transform(scale(0), scale(0));
+            border: 0 solid;
+            border-radius: 50%;
+            box-sizing: content-box;
+            content: '';
+            filter: alpha(opacity=26);
+            @include size(32px, 32px);
+            @include position($slider-handle-after-position, calc(50% - 16px), calc(50% - 16px));
+            opacity: .26;
+            transition: transform .4s cubic-bezier(.25, .8, .25, 1);
+            z-index: -1;
           }
         }
 
-        .e-tip-content {
-          background-color: transparent;
-          height: 16px;
-          overflow: hidden;
-          padding: 0;
-          text-align: center;
-          @if $skin-name == 'material' or $skin-name == 'material-dark' {
-            top: calc(50% - 8px);
-          }
-          @else {
-            top: calc(50% - 10px);
-            left: calc(50% - 16px);
+        &.e-tab-handle {
+          @if ($skin-name == 'material' or $skin-name == 'material-dark') {
+            &.e-handle-start::after {
+              background-color: $slider-tab-background;
+              opacity: .38;
+            }
+
+            &::after {
+              @include handle-transform(scale(1), scale(1));
+              background-color: $slider-color;
+            }
           }
-          width: 100%;
 
-          &.e-material-tooltip-show {
-            color: $slider-material-tooltip-content-color;
+          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI') {
+            border-color: $slider-tab-border-color;
           }
 
-          &.e-material-tooltip-hide {
-            color: transparent;
+          @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4') {
+            @include bg-border($slider-tab-background, $slider-tab-border-color);
+            box-shadow: $slider-tab-active-box-shadow;
+          }
+          @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'Material3') {
+            @if $skin-name == 'Material3' {
+              background: $slider-tab-background;
+            }
+            @else {
+              background-color: $slider-tab-background;
+              border: $slider-tab-border;
+            }
+            box-shadow: $slider-tab-active-box-shadow;
           }
         }
       }
-    }
-    @else {
-      @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
-        background-color: $slider-active-handle-bg-color;
-        border: 1px solid $slider-hover-handle-color;
-      }
-
-      .e-tip-content {
-        padding: $slider-tooltip-padding;
-        text-align: center;
 
-        @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
-          color: $slider-button-icon-color;
+      .e-tab-track {
+        @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI') {
+          background-color: $slider-tab-track-color;
         }
       }
     }
-  }
 
-  .e-slider-horizantal-color {
-    height: 100%;
-    position: absolute;
-    top: 0;
-  }
+    &.e-rtl {
+      &.e-horizontal {
+        .e-slider {
+          .e-handle {
+            margin: $rtl-slider-h-handle-margin;
+            @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
+              top: calc(50% - 8px);
+            }
+            @else if ($skin-name == 'material' or $skin-name == 'material-dark') {
+              top: calc(50% - 6px);
+            }
+          }
+        }
 
-  .e-slider-vertical-color {
-    left: -1px;
-    position: absolute;
-    width: 100%;
-  }
+        .e-scale {
+          &.e-h-scale {
+            .e-tick.e-first-tick {
+              @include tick-position(right);
+              @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+                left: 0;
+              }
+            }
 
-  .e-bigger {
-    @if ($skin-name != 'material' and $skin-name != 'material-dark') {
-      .e-slider-tooltip.e-tooltip-wrap.e-popup {
-        .e-tip-content {
-          padding: $slider-tooltip-padding;
+            .e-tick.e-last-tick {
+              @include tick-position(left);
+            }
+          }
         }
-      }
 
-      &.e-slider-tooltip.e-tooltip-wrap.e-popup {
-        .e-tip-content {
-          padding: $slider-tooltip-padding;
-        }
-      }
-    }
-    @else {
-      &.e-slider-tooltip.e-tooltip-wrap.e-popup {
-        .e-tip-content {
-          font-size: 11px;
-          line-height: 16px;
+        .e-slider-button {
+          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI') {
+            margin-top: -8px;
+          }
+          @else if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4') {
+            margin-top: -7px;
+          }
+          @else if ($skin-name == 'tailwind'  or $skin-name == 'bootstrap5') {
+            margin-top: -13px;
+
+            .e-button-icon::before {
+              font-size: 18px;
+            }
+          }
         }
       }
 
-      .e-slider-tooltip.e-tooltip-wrap.e-popup {
-        .e-tip-content {
-          font-size: 11px;
-          line-height: 16px;
-        }
+      &.e-vertical {
+        direction: ltr;
       }
     }
-  }
 
-  .e-bigger .e-control-wrapper.e-slider-container,
-  .e-control-wrapper.e-slider-container.e-bigger {
-    @if ($skin-name != 'material' and $skin-name != 'material-dark') {
-      .e-slider {
-        .e-handle {
-          height: $slider-handle-mobile-height;
-          width: $slider-handle-mobile-width;
-        }
+    &.e-disabled {
+      @if ($skin-name == 'tailwind') {
+        filter: alpha(Opacity=100);
+        opacity: 1;
+      }
+      @if ($skin-name == 'bootstrap5') {
+        opacity: .5;
       }
+      @if ($skin-name == 'material' or $skin-name == 'material-dark') {
+        &.e-material-slider .e-slider .e-handle.e-handle-first {
+          background-color: $grey-600;
+        }
 
-      @if ($skin-name == 'FluentUI') {
-        .e-slider-button {
-          height: 20px;
-          width: 20px;
+        &:hover {
+          .e-scale .e-tick {
+            visibility: hidden;
+          }
         }
 
-        &.e-horizontal {
-          .e-first-button,
-          .e-second-button {
-            margin-top: $slider-touch-btn-center-align;
+        .e-slider {
+          .e-range {
+            background: $slider-disabled-bg-color;
+          }
 
-            .e-button-icon::before {
-              font-size: 17px;
+          .e-handle {
+            background: $grey-600;
+            transform: scale(.5) !important;/* stylelint-disable-line declaration-no-important */
+
+            &.e-handle-first {
+              background-color: $grey-600;
+              border: 0;
+            }
+
+            &::after {
+              @include handle-transform(scale(0), scale(1));
+              background: transparent;
+              border: 7px solid $slider-material-tooltip-content-color;
+              border-radius: 50%;
+              box-sizing: border-box;
+              content: '';
+              @include size(26px, 26px);
+              @include position(absolute, calc(50% - 13px), calc(50% - 13px));
+              opacity: 1;
+              transition: none;
+              z-index: -1;
             }
           }
         }
+      }
 
-        &.e-vertical {
-          .e-first-button,
-          .e-second-button {
-            margin-right: $slider-touch-btn-center-align;
+      @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
+        .e-slider {
+          .e-range {
+            background: $slider-disabled-bg-color;
+          }
 
-            .e-button-icon::before {
-              font-size: 17px;
-            }
+          .e-handle {
+            border-color: $slider-disabled-bg-color;
           }
         }
       }
 
-      @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'Material3') {
-        .e-slider-button {
-          height: 18px;
-          width: 18px;
-        }
+      .e-btn {
+        cursor: default;
+      }
 
-        &.e-vertical {
-          &.e-slider-btn {
-            @if ($skin-name == 'bootstrap5') {
-              padding: 36px 0;
-            }
-            @else {
-              padding: 34px 0;
-            }
+      .e-slider {
+        .e-handle {
+          cursor: default;
+
+          &.e-handle-disable {
+            display: $slider-disabled-handle-show;
           }
+        }
+      }
 
-          .e-first-button,
-          .e-second-button {
-            @if ($skin-name == 'bootstrap5' or $skin-name == 'Material3') {
-              margin-right: -12px;
-            }
-            @else {
-              margin-right: -9px;
-            }
+      @if ($skin-name == 'bootstrap4') {
+        .e-slider {
+          .e-range {
+            background-color: $slider-disabled-range-color;
           }
 
-          .e-slider {
-            .e-slider-track {
-              left: calc(50% - 4px);
-              width: 8px;
-            }
+          .e-handle {
+            @include bg-border($slider-disabled-handle-color, $slider-disabled-handle-color);
+          }
 
-            .e-range {
-              left: calc(50% - 4px);
-              width: 8px;
-            }
+          .e-slider-track {
+            background-color: $slider-disabled-track-color;
           }
         }
 
-        &.e-horizontal .e-slider {
-          .e-limits {
-            height: 8px;
-            top: calc(50% - 4px);
-            @if ($skin-name == 'bootstrap5' and $skin-name == 'FluentUI') {
-              border-radius: $slider-range-border-radius;
-            }
+        .e-scale .e-tick {
+          .e-tick-value {
+            color: $slider-button-bg-color;
           }
         }
 
-        &.e-vertical .e-slider {
-          .e-limits {
-            left: calc(50% - 4px);
-            width: 8px;
-            @if ($skin-name == 'bootstrap5' and $skin-name == 'FluentUI') {
-              border-radius: $slider-range-border-radius;
-            }
-          }
+        .e-slider-button {
+          @include bg-border($slider-disabled-bg-color, $white);
         }
       }
+    }
 
-      @if ($skin-name == 'bootstrap5' or $skin-name == 'Material3') {
-
-        &.e-horizontal,
-        &.e-vertical {
-          .e-slider-button.e-first-button,
-          .e-slider-button.e-second-button {
-            border-radius: 12px;
-            height: 24px;
-            width: 24px;
-            @if $skin-name == 'Material3' {
-              padding: 0;
-            }
+    @if ($skin-name == 'bootstrap4') {
+      &:not(.e-disabled) {
+        .e-slider-button {
+          &:hover {
+            @include bg-border(darken($gray-600, 7.5%), darken($gray-600, 10%));
+          }
 
-            .e-button-icon::before {
-              font-size: 22px;
-            }
+          &:active {
+            @include bg-border(darken($gray-600, 10%), darken($gray-600, 12%));
           }
         }
+      }
+    }
 
-        &.e-horizontal {
-
-          .e-slider-button.e-first-button,
-          .e-slider-button.e-second-button {
-            margin-top: -12px;
-          }
+    &.e-horizontal {
+      @include size(48px, 100%);
+      @if ($skin-name == 'material' or $skin-name == 'material-dark') {
+        .e-first-button {
+          @include button-position(0, null, $slider-btn-center-align, 50%);
+          @include button-style($slider-button-hleft-bg-image, 7px, calc(50% - 3.6px), calc(50% - 4.6px));
+        }
 
-          .e-tick-both {
-            &.e-scale {
-              &.e-h-scale {
-                .e-tick {
-                  height: 24px;
-                  top: -14px;
-                }
+        .e-second-button {
+          @include button-position(null, 0, $slider-btn-center-align, 50%);
+          @include button-style($slider-button-hright-bg-image, 7px, calc(50% - 3.6px), calc(50% - 2.6px));
+        }
+      }
+      @else if ($skin-name != 'highcontrast' and $skin-name != 'highcontrast-light') {
+        .e-first-button {
+          @include button-position(0, null, $slider-btn-center-align, 50%);
 
-                .e-large {
-                  height: 32px;
-                  top: -10px;
-                }
-              }
-            }
+          @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $skin-name != 'Material3' and $skin-name != 'fluent2') {
+            @include button-style($slider-button-hleft-bg-image, 8px, calc(50% - 4px), calc(50% - 5px));
           }
-
-          .e-tick-before {
-            &.e-scale {
-              &.e-h-scale {
-                .e-tick {
-                  height: $tick-after-mobile-height;
-                  top: $tick-before-mobile-top;
-                }
-
-                .e-large {
-                  height: $largetick-before-mobile-height;
-                  top: $tick-before-mobile-top;
-                }
-              }
+          @else if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
+            @include button-icon($slider-button-icon-bg-color,'\e738', 17px);
+            @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
+              @include button-icon($slider-button-icon-bg-color,'\e738', 14px);
+            }
+            @else if ($skin-name == 'Material3') {
+              @include button-icon($slider-button-icon-bg-color,'\e738', 16px);
             }
           }
-
-          .e-tick-after {
-            &.e-scale {
-              &.e-h-scale {
-                .e-tick {
-                  height: $tick-after-mobile-height;
-                  top: $tick-after-mobile-top;
-                }
-
-                .e-large {
-                  height: $largetick-before-mobile-height;
-                  top: $largetick-after-mobile-top;
-                }
+          @else {
+            .e-button-icon::before {
+              font-size: 17px;
+              @if ($skin-name == 'tailwind') {
+                color: $slider-button-icon-bg-color;
+                content: '\e765';
+              }
+              @else {
+                content: '\e761';
               }
             }
           }
         }
 
-        &.e-vertical {
+        .e-second-button {
+          @include button-position(null, 0, $slider-btn-center-align, 50%);
 
-          .e-tick-both {
-            &.e-scale {
-              .e-tick {
-                left: 2px;
-                width: 24px;
-              }
-
-              .e-large {
-                left: -2px;
-                width: 32px;
-              }
-            }
+          @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $skin-name != 'Material3' and $skin-name != 'fluent2') {
+            @include button-style($slider-button-hright-bg-image, 8px, calc(50% - 4px), calc(50% - 3px));
           }
-
-          .e-tick-before {
-
-            &.e-scale {
-              &.e-v-scale {
-                .e-tick {
-                  left: $tick-before-mobile-left;
-                  width: $tick-after-mobile-height;
-                }
-
-                .e-large {
-                  left: $largetick-before-mobile-left;
-                  width: $largetick-before-mobile-height;
-                }
-              }
+          @else if($skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
+            @include button-icon($slider-button-icon-bg-color, '\e75c', 17px);
+            @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
+              @include button-icon($slider-button-icon-bg-color, '\e75c', 14px);
+            }
+            @else if ($skin-name == 'Material3') {
+              @include button-icon($slider-button-icon-bg-color, '\e75c', 16px);
             }
           }
-
-          .e-tick-after {
-
-            &.e-scale {
-              &.e-v-scale {
-                .e-tick {
-                  left: $tick-after-mobile-left;
-                  width: $tick-after-mobile-height;
-                }
-
-                .e-large {
-                  left: $tick-after-mobile-left;
-                  width: $largetick-before-mobile-height;
-                }
+          @else {
+            .e-button-icon::before {
+              font-size: 18px;
+              @if ($skin-name == 'tailwind') {
+                color: $slider-button-icon-bg-color;
+                content: '\e748';
+              }
+              @else {
+                content: '\e707';
               }
             }
           }
         }
       }
-
-      @if ($skin-name == 'tailwind') {
-        .e-scale.e-h-scale {
-          &.e-tick-after {
-            top: 7px;
+      @else {
+        .e-first-button {
+          @include button-position(0, null, $slider-btn-center-align, 50%);
+          @include button-icon($slider-button-icon-color, '\e829', 8px);
+          .e-button-icon::before {
+            font-weight: 600;
+            @include position(absolute, calc(50% - 4px), calc(50% - 5px));
           }
         }
 
-        &.e-horizontal,
-        &.e-vertical {
-          .e-slider-button.e-first-button,
-          .e-slider-button.e-second-button {
-            border-radius: 12px;
-            height: 24px;
-            width: 24px;
-
-            .e-button-icon::before {
-              font-size: 22px;
-            }
+        .e-second-button {
+          @include button-position(null, 0, $slider-btn-center-align, 50%);
+          @include button-icon($slider-button-icon-color, '\e830', 8px);
+          .e-button-icon::before {
+            font-weight: 600;
+            @include position(absolute, calc(50% - 4px), calc(50% - 3px));
           }
         }
+      }
 
-        &.e-horizontal {
-
-          &.e-scale-both {
-            .e-range {
-              height: 6px;
-            }
-          }
-
-          .e-slider-track {
-            border-radius: 6px;
-          }
-
-          .e-limits {
-            height: 6px;
-          }
-
-          .e-first-button,
-          .e-second-button {
-            margin-top: -14px;
-          }
-
-          .e-tick-both {
-            &.e-scale {
-              &.e-h-scale {
-                .e-tick {
-                  height: 22px;
-                  top: -19px;
-                }
-
-                .e-large {
-                  height: 30px;
-                  top: -16px;
-                }
-              }
-            }
-          }
-
-          .e-tick-before {
-            &.e-scale {
-              &.e-h-scale {
-                .e-tick {
-                  height: $tick-after-mobile-height;
-                }
-
-                .e-large {
-                  height: $largetick-before-mobile-height;
-                }
-              }
-            }
-          }
-
-          .e-tick-after {
-            &.e-scale {
-              &.e-h-scale {
-                .e-tick {
-                  height: $tick-after-mobile-height;
-                }
-
-                .e-large {
-                  height: $largetick-before-mobile-height;
-                }
-              }
-            }
-          }
+      &.e-slider-btn {
+        padding: $slider-button-horizon-padding;
+      }
 
-          &.e-scale-both {
-            .e-scale {
-              top: 17px;
-            }
-          }
+      .e-slider {
+        @include size(32px, 100%);
+        position: relative;
+        top: calc(50% - 16px);
+      }
 
-          &.e-slider-btn {
-            padding: $slider-button-horizon-mobile-padding;
-          }
+      .e-slider-track {
+        @include size($slider-container-height, 100%);
+        left: 0;
+        position: absolute;
+        overflow: hidden;
+        @if ($skin-name == 'material' or $skin-name == 'material-dark') {
+          background: $slider-handle-start-border-color;
+          top: calc(50% - 1px);
         }
-
-        &.e-vertical {
-
-          &.e-scale-both {
-            .e-range {
-              width: 6px;
-            }
-          }
-
-          .e-range {
-            width: 6px;
-          }
-
-          .e-slider-track {
-            border-radius: 6px;
-          }
-
-          &.e-slider-btn {
-            padding: $slider-button-vertical-mobile-padding;
-          }
-
-          .e-slider-button {
-            margin-right: -15px;
-          }
-
-          .e-tick-both {
-            &.e-scale {
-              &.e-v-scale {
-                .e-tick {
-                  left: 4px;
-                  width: 22px;
-                }
-
-                .e-large {
-                  left: 0;
-                  width: 30px;
-                }
-              }
-            }
-          }
-
-          .e-tick-before {
-
-            &.e-scale {
-              &.e-v-scale {
-                .e-tick {
-                  width: $tick-after-mobile-height;
-                }
-
-                .e-large {
-                  width: $largetick-before-mobile-height;
-                }
-              }
-            }
-          }
-
-          .e-tick-after {
-
-            &.e-scale {
-              &.e-v-scale {
-                .e-tick {
-                  width: $tick-after-mobile-height;
-                }
-
-                .e-large {
-                  width: $largetick-before-mobile-height;
-                }
-              }
-            }
+        @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent2') {
+          background: $slider-track-color;
+          top: calc(50% - 2px);
+          @if $skin-name == 'fluent2' or $skin-name == 'FluentUI' {
+            border-radius: $slider-radius;
           }
         }
+        @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'Material3' or $skin-name == 'Material3-dark') {
+          background: $slider-track-color;
+          border-radius: 4px;
+          top: calc(50% - 4px);
+        }
+        @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5') {
+          top: calc(50% - 3px);
+        }
+        @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
+          background: $slider-handle-start-border-color;
+          border: 1px solid $slider-track-border-color;
+          border-radius: 4px;
+          top: calc(50% - 5px);
+        }
+        @if $skin-name == 'bootstrap4' {
+          background: $slider-handle-start-border-color;
+          border-radius: 6px;
+        }
       }
 
-      &.e-horizontal {
-        @if ($skin-name == 'bootstrap5') {
-          &.e-slider-btn {
-            padding: 0 36px;
-          }
+      .e-handle {
+        @if ($skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'bootstrap5') {
+          margin-left: -6px;
+          top: calc(50% - 6px);
         }
-        @if ($skin-name == 'bootstrap4') {
-          &.e-slider-btn {
-            padding: 0 34px;
-          }
-
-          .e-slider-button {
-            height: $slider-handle-mobile-buttons-height;
-            margin-top: -9px;
-            width: $slider-handle-mobile-buttons-width;
-          }
+        @else if ($skin-name == 'bootstrap4') {
+          margin-left: -7px;
+          top: calc(50% - 7px);
         }
-
-        @if ($skin-name == 'tailwind') {
-          .e-slider-track {
-            height: 6px;
+        @else if($skin-name == 'Material3') {
+          margin-left: -10px;
+          top: calc(50% - 12px);
+        }
+        @else if $skin-name == 'fluent2' {
+          margin-left: -10px;
+          top: calc(50% - 10px);
+        }
+        @else {
+          @if ($skin-name == 'tailwind') {
+            margin-left: -6px;
           }
-
-          .e-range {
-            height: 6px;
+          @else {
+            margin-left: -8px;
           }
+          top: calc(50% - 8px);
         }
+      }
 
-        .e-slider {
-          @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'Material3') {
-            .e-slider-track {
-              height: 8px;
-              top: calc(50% - 4px);
-            }
-
-            .e-range {
-              height: 8px;
-              top: calc(50% - 4px);
-            }
-          }
-
-          .e-handle {
-            @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
-              margin-left: $slider-handle-mobile-margin-left;
-              top: $slider-handle-mobile-handle-top;
-            }
-            @else {
-              margin-left: -9px;
-              top: calc(50% - 9px);
-            }
+      &.e-scale-both {
+        .e-handle {
+          @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
+            margin-left: -8px;
+            top: calc(50% - 7px);
           }
         }
 
-        &.e-scale-both {
-          .e-slider {
-            .e-handle {
-              @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
-                margin-left: -9px;
-                top: calc(50% - 8px);
-              }
-            }
+        .e-range {
+          height: $slider-range-height;
+          @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
+            top: calc(50% - 2px);
           }
         }
       }
 
-      &.e-vertical {
-        .e-slider {
-          .e-handle {
-            @if ($skin-name == 'tailwind') {
-              left: calc(50% - 5px);
-            }
-            @else if $skin-name == 'Material3' {
-              left: calc(50% - 14px);
-            }
-            @else {
-              left: calc(50% - 9px);
-            }
-            margin-bottom: -9px;
-            @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
-              left: calc(50% - 8px);
-              margin-bottom: -8px;
-            }
-          }
-
-          @if ($skin-name == 'tailwind') {
-            .e-range {
-              width: 6px;
-            }
-          }
+      .e-range {
+        height: $slider-range-height;
+        @if ($skin-name == 'material' or $skin-name == 'material-dark') {
+          top: calc(50% - 1px);
         }
-
-        &.e-scale-both {
-          .e-slider {
-            .e-handle {
-              @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
-                left: calc(50% - 10px);
-                margin-bottom: -9px;
-              }
-              @if $skin-name == 'bootstrap4' {
-                left: calc(50% - 8px);
-                margin-bottom: -8px;
-              }
-            }
-          }
+        @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or or $skin-name == 'fluent2') {
+          top: calc(50% - 2px);
         }
-
-        @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
-          .e-slider-track {
-            width: 6px;
-          }
-
-          .e-range {
-            width: 6px;
-          }
+        @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5') {
+          top: calc(50% - 3px);
+        }
+        @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'tailwind' or $skin-name == 'Material3') {
+          top: calc(50% - 4px);
         }
       }
 
-      &.e-rtl {
-        &.e-horizontal {
-          .e-slider {
-            .e-handle {
-              @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
-                margin: 0 -8px 0 0;
-              }
-            }
-          }
+      .e-limits {
+        background-color: $slider-limit-bar-color;
+        position: absolute;
+        @include alignment($slider-limit-bar-horizontal-height, $slider-limit-bar-top, 'horizontal');
+        @if ($skin-name == 'bootstrap5' or $skin-name == 'fluent2') {
+          border-radius: 4px;
+        }
+        @if ($skin-name == 'FluentUI') {
+          border-radius: 2px;
         }
       }
     }
 
-    .e-scale .e-tick .e-tick-value {
-      font-size: $slider-mobile-scale-font-size;
-    }
-  }
-
-  .e-control-wrapper.e-slider-container {
-    -moz-user-select: none;
-    -ms-user-select: none;
-    -webkit-tap-highlight-color: transparent;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    box-sizing: border-box;
-    display: inline-block;
-    height: $slider-wrap-height;
-    line-height: normal;
-    outline: none;
-    position: relative;
-    user-select: none;
+    &.e-vertical {
+      @include size(inherit, 48px);
+      @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
+        padding: 28px 0;
+      }
+      @else if ($skin-name == 'FluentUI') {
+        padding: 32px 0;
+      }
+      @else if ($skin-name == 'bootstrap4') {
+        padding: 30px 0;
+      }
+      @else {
+        padding: 38px 0;
+      }
 
-    &::after {
-      content: $skin-name;
-      display: none;
-    }
+      .e-slider {
+        @include size(100%, 32px);
+        @if ($skin-name == 'FluentUI') {
+          left: calc(50% - 15px);
+        }
+        @else {
+          left: calc(50% - 16px);
+        }
+        position: relative;
+      }
 
-    .e-slider {
-      .e-handle {
-        &.e-large-thumb-size {
-          transform: scale(1.5);
+      .e-slider-track {
+        @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
+          background: $slider-track-color;
+        }
+        @if ($skin-name != 'highcontrast' and $skin-name != 'highcontrast-light' and $skin-name != 'FluentUI' and $skin-name != 'Material3' and $skin-name != 'fluent2') {
+          background: $slider-handle-start-border-color;
+        }
+        bottom: 0;
+        height: 100%;
+        position: absolute;
+        overflow: hidden;
+        @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
+          @if ($skin-name == 'tailwind') {
+            left: calc(50%);
+          }
+          @else {
+            left: calc(50% - 2px);
+          }
+          width: 4px;
+        }
+        @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
+          @include alignment(8px, calc(50% - 4px), 'vertical');
+        }
+        @else if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
+          border: 1px solid $slider-track-border-color;
+          border-radius: 3px;
+          @include alignment(10px, calc(50% - 5px), 'vertical');
+        }
+        @else if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5') {
+          @include alignment(6px, calc(50% - 3px), 'vertical');
+        }
+        @else if ($skin-name == 'material' or $skin-name == 'material-dark') {
+          @include alignment(2px, calc(50% - 1px), 'vertical');
+        }
+        @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
+          border-radius: 4px;
+        }
+        @else if ($skin-name == 'bootstrap4') {
+          border-radius: 6px;
+        }
+        @else if ($skin-name == 'FluentUI') {
+          border-radius: 2px;
         }
       }
-    }
 
-    &.e-rtl {
-      &.e-horizontal {
-        .e-slider {
-          .e-handle {
-            margin: $rtl-slider-h-handle-margin;
-            @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4') {
-              top: calc(50% - 8px);
-            }
-            @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
-              top: calc(50% - 8px);
-            }
-            @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-              top: calc(50% - 6px);
-            }
+      &.e-small-size {
+        &.e-slider-btn {
+          height: 100%;
+          padding: $slider-button-vertical-padding;
+
+          .e-slider {
+            @include size(100%, $slider-height);
           }
         }
+      }
 
-        .e-scale {
-          &.e-h-scale {
-            .e-tick.e-first-tick {
-              @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-                background-position-x: right;
-              }
+      @if ($skin-name == 'material' or $skin-name == 'material-dark') {
+        .e-first-button {
+          @include v-button-position(null, 0, $slider-btn-center-align, 50%);
+          @include button-style($slider-button-vdown-bg-image, 8px, calc(50% - 2.7px), calc(50% - 3.8px));
+        }
 
-              @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
-                background-position: right center;
-                left: 0;
-              }
+        .e-second-button {
+          @include v-button-position(0, null, $slider-btn-center-align, 50%);
+          @include button-style($slider-button-vup-bg-image, 8px, calc(50% - 4.7px), calc(50% - 3.8px));
+        }
+      }
+      @else if ($skin-name != 'highcontrast' and $skin-name != 'highcontrast-light') {
+        .e-first-button {
+          @include v-button-position(null, 0, $slider-btn-center-align, 50%);
+          @if $skin-name == 'Material3' {
+            margin-right: $slider-btn-vertical-center-align;
+          }
 
-              @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'Material3') {
-                background-position: right center;
-                left: 0;
-              }
+          @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $skin-name != 'Material3' and $skin-name != 'fluent2') {
+            @include button-style($slider-button-vdown-bg-image, 8px, calc(50% - 3.6px), calc(50% - 4px));
+          }
+          @else if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
+            @include button-icon($slider-button-icon-bg-color, '\e734', 14px);
+            @if ($skin-name == 'bootstrap5') {
+              @include button-icon($slider-button-icon-bg-color, '\e734', 18px);
             }
-
-            .e-tick.e-last-tick {
-              @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-                background-position-x: left;
+            @else if ($skin-name == 'Material3') {
+              @include button-icon($slider-button-icon-bg-color, '\e734', 16px);
+            }
+            .e-button-icon::before {
+              @if $skin-name == 'fluent2' {
+                @include position(absolute, 3px, 4px);
               }
-              @if ($skin-name != 'material' and $skin-name != 'material-dark') {
-                background-position: left center;
+            }
+          }
+          @else {
+            .e-button-icon::before {
+              font-size: 18px;
+              content: '\e729';
+              @if ($skin-name == 'tailwind') {
+                color: $slider-button-icon-bg-color;
               }
             }
           }
         }
 
-        .e-slider-button {
-          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI') {
-            margin-top: -8px;
+        .e-second-button {
+          @include v-button-position(0, null, $slider-btn-center-align, 50%);
+          @if $skin-name == 'Material3' {
+            margin-right: $slider-btn-vertical-center-align;
           }
-          @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4') {
-            margin-top: -7px;
+          @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $skin-name != 'Material3' and $skin-name != 'fluent2') {
+            @include button-style($slider-button-vup-bg-image, 8px, calc(50% - 4.5px), calc(50% - 4px));
           }
-          @if ($skin-name == 'tailwind'  or $skin-name == 'bootstrap5') {
-            margin-top: -13px;
-
+          @else if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
+            @include button-icon($slider-button-icon-bg-color, '\e7dd', 14px);
+            @if ($skin-name == 'bootstrap5') {
+              @include button-icon($slider-button-icon-bg-color, '\e7dd', 18px);
+            }
+            @else if ($skin-name == 'Material3') {
+              @include button-icon($slider-button-icon-bg-color, '\e7dd', 16px);
+            }
+            .e-button-icon::before {
+              @if $skin-name == 'fluent2' {
+                @include position(absolute, 3px, 4px);
+              }
+            }
+          }
+          @else {
             .e-button-icon::before {
               font-size: 18px;
+              @if ($skin-name == 'tailwind') {
+                color: $slider-button-icon-bg-color;
+                content: '\e776';
+              }
+              @else {
+                content: '\e7a0';
+              }
             }
           }
         }
       }
+      @else {
+        .e-first-button {
+          @include v-button-position(null, 0, $slider-btn-center-align, 50%);
+          @include button-icon($slider-button-icon-color, '\e829', 9px);
 
-      &.e-vertical {
-        direction: ltr;
-      }
-    }
-
-    &.e-disabled {
-      @if ($skin-name == 'tailwind') {
-        filter: alpha(Opacity=100);
-        opacity: 1;
-      }
-      @if ($skin-name == 'bootstrap5') {
-        opacity: .5;
-      }
-      @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-        &.e-material-slider .e-slider .e-handle.e-handle-first {
-          background-color: $grey-600;
+          .e-button-icon::before {
+            font-weight: 600;
+            @include position(absolute, calc(50% - 4px), calc(50% - 4.15px));
+            transform: rotate(-90deg);
+          }
         }
 
-        &:hover {
-          .e-scale .e-tick {
-            visibility: hidden;
+        .e-second-button {
+          @include v-button-position(0, null, $slider-btn-center-align, 50%);
+          @include button-icon($slider-button-icon-color, '\e829', 9px);
+
+          .e-button-icon::before {
+            font-weight: 600;
+            @include position(absolute, calc(50% - 5.8px), calc(50% - 5.5px));
+            transform: rotate(90deg);
           }
         }
+      }
 
+      &.e-scale-both {
         .e-slider {
-          .e-range {
-            background: $slider-disabled-bg-color;
+          .e-handle {
+            margin-bottom: $slider-v-handle-margin;
+            @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
+              left: calc(50% - 9px);
+            }
           }
+        }
+      }
 
-          .e-handle {
-            background: $grey-600;
-            transform: scale(.5) !important;/* stylelint-disable-line declaration-no-important */
+      .e-slider {
+        .e-handle {
+          margin-bottom: $slider-v-handle-margin;
+          @if ($skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'bootstrap5') {
+            left: calc(50% - 6px);
+          }
+          @else if($skin-name == 'bootstrap4') {
+            left: calc(50% - 7px);
+          }
+          @else if($skin-name == 'tailwind') {
+            left: calc(50% - 4px);
+          }
+          @else if($skin-name == 'Material3' or $skin-name == 'fluent2') {
+            left: calc(50% - 10px);
+          }
+          @else {
+            left: calc(50% - 8px);
+          }
+        }
 
-            &.e-handle-first {
-              background-color: $grey-600;
-              border: 0;
+        .e-range {
+          @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
+            @include alignment(8px, calc(50% - 4px), 'vertical');
+          }
+          @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'Material3') {
+            @include alignment(6px, calc(50% - 3px), 'vertical');
+          }
+          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
+            @if ($skin-name == 'tailwind') {
+              left: calc(50%);
             }
-
-            &::after {
-              -ms-transform: scale(0);
-              -webkit-transform: scale(0);
-              background: transparent;
-              border: 7px solid $slider-material-tooltip-content-color;
-              border-radius: 50%;
-              box-sizing: border-box;
-              content: '';
-              height: 26px;
-              left: calc(50% - 13px);
-              opacity: 1;
-              position: absolute;
-              top: calc(50% - 13px);
-              transform: scale(1);
-              transition: none;
-              width: 26px;
-              z-index: -1;
+            @else {
+              @include alignment(4px, calc(50% - 2px), 'vertical');
             }
           }
+          @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
+            @include alignment(6px, calc(50% - 3px), 'vertical');
+          }
+          @if ($skin-name == 'material' or $skin-name == 'material-dark') {
+            @include alignment(2px, calc(50% - 1px), 'vertical');
+          }
         }
-      }
 
-      @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
-        .e-slider {
-          .e-range {
-            background: $slider-disabled-bg-color;
+        .e-limits {
+          background-color: $slider-limit-bar-color;
+          position: absolute;
+          @include alignment($slider-limit-bar-vertical-width, $slider-limit-bar-left, 'vertical');
+          @if ($skin-name == 'bootstrap5' or $skin-name == 'fluent2') {
+            border-radius: 4px;
           }
-
-          .e-handle {
-            border-color: $slider-disabled-bg-color;
+          @if ($skin-name == 'FluentUI') {
+            border-radius: 2px;
           }
         }
       }
+    }
 
-      .e-btn {
-        cursor: default;
-      }
+    .e-range {
+      border-radius: $slider-range-border-radius;
+      position: absolute;
+      transition: left 300ms ease-out, right 300ms ease-out, bottom 300ms ease-out, width 300ms ease-out, height 300ms ease-out;
 
-      .e-slider {
-        .e-handle {
-          cursor: default;
+      &.e-drag-horizontal,
+      &.e-drag-vertical {
+        cursor: pointer;
+      }
+    }
 
-          &.e-handle-disable {
-            display: $slider-disabled-handle-show;
+    .e-tick-before {
+      &.e-scale {
+        &.e-h-scale {
+          .e-tick {
+            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+              @include alignment($tick-after-height, $tick-after-top, 'horizontal');
+            }
+            @else {
+              background-position: bottom;
+              @include alignment(50%, 1px, 'horizontal');
+            }
           }
-        }
-      }
 
-      @if ($skin-name == 'bootstrap4') {
-        .e-slider {
-          .e-range {
-            background-color: $slider-disabled-range-color;
+          .e-large {
+            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+              @include alignment($largetick-before-height, $largetick-before-top, 'horizontal');
+            }
           }
+        }
 
-          .e-handle {
-            background-color: $slider-disabled-handle-color;
-            border-color: $slider-disabled-handle-color;
+        &.e-v-scale {
+          .e-tick {
+            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+              @include alignment($tick-after-height, $tick-after-left, 'vertical');
+            }
+            @else {
+              background-position: right;
+              @include alignment(50%, 1px, 'vertical');
+            }
           }
 
-          .e-slider-track {
-            background-color: $slider-disabled-track-color;
+          .e-large {
+            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+              @include alignment($largetick-before-height, $largetick-before-left, 'vertical');
+            }
           }
         }
+      }
+    }
 
-        .e-scale .e-tick {
-          .e-tick-value {
-            color: $slider-button-bg-color;
+    .e-tick-after {
+      &.e-scale {
+        &.e-h-scale {
+          .e-tick {
+            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+              @include alignment($tick-before-height, $tick-before-top, 'horizontal');
+            }
+            @else {
+              background-position-x: center;
+              @include alignment(50%, calc(50% - 1px), 'horizontal');
+            }
           }
-        }
 
-        .e-slider-button {
-          background-color: $slider-disabled-bg-color;
-          border-color: $white;
+          .e-large {
+            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+              @include alignment($largetick-after-height, $largetick-after-top, 'horizontal');
+            }
+          }
         }
-      }
-    }
 
-    @if ($skin-name == 'bootstrap4') {
-      &:not(.e-disabled) {
-        .e-slider-button {
-          &:hover {
-            background-color: darken($gray-600, 7.5%);
-            border-color: darken($gray-600, 10%);
+        &.e-v-scale {
+          .e-tick {
+            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+              @include alignment($tick-before-height, $tick-before-left, 'vertical');
+            }
+            @else {
+              background-position: left;
+              @include alignment(50%, calc(50% - 1px), 'vertical');
+            }
           }
 
-          &:active {
-            background-color: darken($gray-600, 10%);
-            border-color: darken($gray-600, 12%);
+          .e-large {
+            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+              @include alignment($largetick-after-height, $largetick-after-left, 'vertical');
+            }
           }
         }
       }
     }
 
-    &.e-horizontal {
-      height: 48px;
-      width: 100%;
-      @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-        .e-first-button {
-          left: 0;
-          margin-top: $slider-btn-center-align;
-          top: 50%;
-
-          .e-button-icon {
-            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAkFBMVEUAAAD////////////////////////+/v7////+/v7////////+/v7+/v7////////+/v7+/v7+/v7////+/v7+/v7+/v7+/v7////+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7///8G+5iqAAAAL3RSTlMABAgMEBQYHCAkKDA0ODxETFRYYGRsdHyAh4uTm6Onr7O/w8fL09ff4+fr7/P3+/6nVicAAADJSURBVHgBldJHdoNgAANhQUjvPTHuxbgAuv/t/J5O8I82Wn27UfGaVmjvBwvsdmEDUH33JuBxYwNQ/48m4LWzAbie2QR8nkzA/coGoPodTMDzzgagae1ykHAASDgAJBwAEk4xSDgAJBwAEg4ACacYJBwAEg4ACYeAjyMEaqYQSC97CFT/DQxID2sIpK8zBLqZQyC9dRDoajIyID1tIVD10zMg3S0ZSF4IJC8GkhcDyQuB5MVA8kIgeTGQvBhIXggkLwaSFwLJK3cBRvanB71ijlkAAAAASUVORK5CYII=');
-            background-repeat: no-repeat;
-            background-size: cover;
-            display: inline-block;
-            height: 7px;
-            left: calc(50% - 4.6px);
-            position: absolute;
-            top: calc(50% - 3.6px);
-            width: 7px;
+    &.e-scale-before {
+      .e-scale {
+        &.e-v-scale {
+          @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            right: 9px;
           }
         }
+      }
+    }
 
-        .e-second-button {
-          margin-top: $slider-btn-center-align;
-          right: 0;
-          top: 50%;
-
-          .e-button-icon {
-            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAkFBMVEUAAAD////////////////////////+/v7////////+/v7+/v7+/v7////////+/v7////+/v7+/v7+/v7+/v7+/v7////////+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7///9VYKa9AAAAL3RSTlMABAgMEBQYHCAoLDQ4PEBMUFhcZGx0eICDi5Obn6ers7vDx8vP19vf4+fr7/P3++LF0fAAAADNSURBVHgBldNHbsNAGEPhkZSi9F4S915k6d3/dga8Jgjw7bkYzPeXS5ObkkX3EQ5gcRcO6H/qbACbp3AAo6twwOEtHMCsDQecvqpsAKuHcMDw12QD2L2EA/C8EFleiCwvRJYXIssLmeGFzPBCZnghM7yQGV7IDC9Eglc26D6zwfS2JIP9a/To4b8pyWD9GH1c/11FNOZthO/4nvEeX5dksH2OTnT4rUsyWN4Xk4cj8nBEHo7IwxF5OCIPR+ThiDwckYcj8nBEHo5Iw5GdAVm8p9sPUXNKAAAAAElFTkSuQmCC');
-            background-repeat: no-repeat;
-            background-size: cover;
-            display: inline-block;
-            height: 7px;
-            left: calc(50% - 2.6px);
-            position: absolute;
-            top: calc(50% - 3.6px);
-            width: 7px;
+    &.e-scale-after {
+      .e-scale {
+        &.e-v-scale {
+          @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            right: 9px;
           }
         }
       }
-      @else if ($skin-name != 'highcontrast' and $skin-name != 'highcontrast-light') {
-        .e-first-button {
-          left: 0;
-          margin-top: $slider-btn-center-align;
-          top: 50%;
-
-          @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $skin-name != 'Material3') {
-            .e-button-icon {
-              background-image: $slider-button-hleft-bg-image;
-              background-repeat: no-repeat;
-              background-size: cover;
-              height: 8px;
-              left: calc(50% - 5px);
-              position: absolute;
-              top: calc(50% - 4px);
-              width: 8px;
+    }
+
+    .e-tick-both {
+      &.e-scale {
+        &.e-h-scale {
+          .e-tick {
+            @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
+              @include alignment(calc(100% - 6px), -11px, 'horizontal');
             }
-          }
-          @else if($skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
-            .e-button-icon {
-              font-family: 'e-icons';
+            @else if ($skin-name == 'bootstrap4') {
+              @include alignment(16px, -8px, 'horizontal');
             }
-
-            .e-button-icon::before {
-              color: $slider-button-icon-bg-color;
-              content: '\e738';
-              @if ($skin-name == 'FluentUI') {
-                font-size: 14px;
-              }
-              @else if ($skin-name == 'Material3') {
-                font-size: 16px;
-              }
-              @else {
-                font-size: 17px;
-              }
+            @else if ($skin-name == 'bootstrap5') {
+              @include alignment(18px, -11px, 'horizontal');
             }
-          }
-          @else {
-            .e-button-icon::before {
-              font-size: 17px;
-              @if ($skin-name == 'tailwind') {
-                color: $slider-button-icon-bg-color;
-                content: '\e765';
-              }
-              @else {
-                content: '\e761';
-              }
+            @else if ($skin-name == 'Material3') {
+              @include alignment(18px, -13px, 'horizontal');
             }
-          }
-        }
-
-        .e-second-button {
-          margin-top: $slider-btn-center-align;
-          right: 0;
-          top: 50%;
-
-          @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5'  and $skin-name != 'FluentUI' and $skin-name != 'Material3') {
-            .e-button-icon {
-              background-image: $slider-button-hright-bg-image;
-              background-repeat: no-repeat;
-              background-size: cover;
-              height: 8px;
-              left: calc(50% - 3px);
-              position: absolute;
-              top: calc(50% - 4px);
-              width: 8px;
+            @else if ($skin-name == 'tailwind') {
+              @include alignment(16px, -16px, 'horizontal');
             }
-          }
-          @else if($skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
-            .e-button-icon {
-              font-family: 'e-icons';
+            @else if ($skin-name == 'FluentUI') {
+              @include alignment(30px, -17px, 'horizontal');
             }
-
-            .e-button-icon::before {
-              color: $slider-button-icon-bg-color;
-              content: '\e75c';
-              @if ($skin-name == 'FluentUI') {
-                font-size: 14px;
-              }
-              @else if ($skin-name == 'Material3') {
-                font-size: 16px;
-              }
-              @else {
-                font-size: 17px;
-                margin-left: 1px;
-              }
+            @else if ($skin-name == 'fabric' or $skin-name == 'fabric-dark') {
+              @include alignment(calc(100% - 3px), -12.5px, 'horizontal');
             }
-          }
-          @else {
-            .e-button-icon::before {
-              font-size: 18px;
-              @if ($skin-name == 'tailwind') {
-                color: $slider-button-icon-bg-color;
-                content: '\e748';
-              }
-              @else {
-                content: '\e707';
-              }
+            @else if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
+              @include alignment(calc(100% - 6px), -12px, 'horizontal');
+            }
+            @if ($skin-name == 'material' or $skin-name == 'material-dark') {
+              background-position: center;
+              height: 99%;
             }
-          }
-        }
-      }
-      @else {
-        .e-first-button {
-          left: 0;
-          margin-top: $slider-btn-center-align;
-          top: 50%;
-
-          .e-button-icon {
-            font-family: 'e-icons';
           }
 
-          .e-button-icon::before {
-            color: $slider-button-icon-color;
-            content: '\e829';
-            font-size: 8px;
-            font-weight: 600;
-            left: calc(50% - 5px);
-            position: absolute;
-            top: calc(50% - 4px);
+          .e-large {
+            @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
+              @include alignment(100%, -8px, 'horizontal');
+            }
+            @else if ($skin-name == 'bootstrap4') {
+              @include alignment(22px, -5px, 'horizontal');
+            }
+            @else if ($skin-name == 'bootstrap5') {
+              @include alignment(26px, -7px, 'horizontal');
+            }
+            @else if ($skin-name == 'tailwind') {
+              @include alignment(24px, -12px, 'horizontal');
+            }
+            @else if ($skin-name == 'FluentUI') {
+              @include alignment(38px, -13px, 'horizontal');
+            }
+            @else if ($skin-name == 'Material3') {
+              @include alignment(26px, -10px, 'horizontal');
+            }
+            @else if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
+              @include alignment(calc(100% + 3px), -9px, 'horizontal');
+            }
           }
         }
 
-        .e-second-button {
-          margin-top: $slider-btn-center-align;
-          right: 0;
-          top: 50%;
-
-          .e-button-icon {
-            font-family: 'e-icons';
+        &.e-v-scale {
+          .e-tick {
+            @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
+              background-position: center;
+              width: 100%;
+            }
+            @if ($skin-name == 'bootstrap4') {
+              background-position: center;
+              @include alignment(calc(100% - 12px), 6px, 'vertical');
+            }
+            @if ($skin-name == 'bootstrap5' or $skin-name == 'Material3') {
+              background-position: center;
+              @include alignment(18px, 5px, 'vertical');
+            }
+            @if ($skin-name == 'tailwind') {
+              @include alignment(16px, 6px, 'vertical');
+            }
+            @if ($skin-name == 'material' or $skin-name == 'material-dark') {
+              background-position: center;
+              width: 100%;
+            }
+            @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI') {
+              @include alignment(calc(100% - 2px), 0, 'vertical');
+            }
+            @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
+              @include alignment(calc(100% - 6px), 2px, 'vertical');
+            }
           }
 
-          .e-button-icon::before {
-            color: $slider-button-icon-color;
-            content: '\e830';
-            font-size: 8px;
-            font-weight: 600;
-            left: calc(50% - 3px);
-            position: absolute;
-            top: calc(50% - 4px);
+          .e-large {
+            @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
+              width: 100%;
+            }
+            @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5') {
+              @include alignment(calc(100% - 6px), 3px, 'vertical');
+            }
+            @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'Material3') {
+              @include alignment(26px, 1px, 'vertical');
+            }
+            @if ($skin-name == 'tailwind') {
+              @include alignment(24px, 3px, 'vertical');
+            }
+            @if ($skin-name == 'material' or $skin-name == 'material-dark') {
+              width: 100%;
+            }
+            @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
+              @include alignment(calc(100% + 3px), -2px, 'vertical');
+            }
           }
         }
       }
+    }
 
-      &.e-slider-btn {
-        padding: $slider-button-horizon-padding;
+    .e-scale {
+      box-sizing: content-box;
+      font-family: $slider-scale-font-family;
+      @include size(28px, 100%);
+      @if $skin-name == 'fluent2' {
+        @include size(20px, 100%);
       }
-
-      .e-slider {
-        height: 32px;
-        position: relative;
-        top: calc(50% - 16px);
-        width: 100%;
+      line-height: normal;
+      list-style: none outside none;
+      margin: 0;
+      outline: 0 none;
+      padding: 0;
+      position: absolute;
+      top: $slider-scale-top;
+      z-index: 1;
+      @if ($skin-name != 'material' and $skin-name != 'material-dark' and $skin-name != 'fluent2') {
+        font-size: $slider-scale-font-size;
+        margin-top: $slider-center-align;
       }
 
-      .e-slider-track {
-        height: $slider-container-height;
-        left: 0;
-        position: absolute;
-        width: 100%;
-        @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-          background: $slider-handle-start-border-color;
-          overflow: hidden;
-          top: calc(50% - 1px);
+      @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
+        z-index: -1;
+
+        &.e-tick-both {
+          top: 12px;
         }
-        @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI') {
-          background: $slider-track-color;
-          overflow: hidden;
-          top: calc(50% - 2px);
-          @if $skin-name == 'FluentUI' {
-            border-radius: 2px;
-          }
+      }
+
+      .e-tick {
+        @if ($theme-name == 'bootstrap5-dark' or $theme-name == 'tailwind-dark' or $theme-name == 'fluentui-dark') {
+          background-image: $slider-scale-tick-image-dark;
         }
-        @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'Material3' or $skin-name == 'Material3-dark') {
-          background: $slider-track-color;
-          border-radius: 4px;
-          overflow: hidden;
-          top: calc(50% - 4px);
+        @else {
+          background-image: $slider-scale-tick-image;
         }
-        @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5') {
-          top: calc(50% - 3px);
+        cursor: $slider-cursor;
+        outline: none;
+        position: relative;
+        user-select: none;
+        @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+          background-position: center center;
         }
-        @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
-          background: $slider-handle-start-border-color;
-          border: 1px solid $slider-track-border-color;
-          border-radius: 4px;
-          overflow: hidden;
-          top: calc(50% - 5px);
+
+        @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
+          &.e-large {
+            @if ($skin-name != 'bootstrap4') {
+              background-image: $slider-scale-tick-image-dark;
+            }
+            @else {
+              background-image: $slider-small-scale-tick-image;
+            }
+          }
         }
-        @if $skin-name == 'bootstrap4' {
-          background: $slider-handle-start-border-color;
-          border-radius: 6px;
-          overflow: hidden;
+
+        .e-tick-value {
+          color: $slider-tick-font-color;
+          font-family: $slider-scale-font-family;
+          font-size: $slider-scale-font-size;
+          outline: none;
+          position: absolute;
+          user-select: none;
+          white-space: nowrap;
+          @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'Material3') {
+            line-height: 1.5;
+          }
+          @if ($skin-name == 'tailwind') {
+            line-height: 18px;
+          }
         }
       }
 
-      .e-handle {
-        @if ($skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'bootstrap5') {
-          margin-left: -6px;
-          top: calc(50% - 6px);
+      &.e-v-scale {
+        @include size(100%, 28px);
+        @if ($skin-name == 'tailwind') {
+          left: calc(50% - 12px);
         }
-        @else if ($skin-name == 'bootstrap4') {
-          margin-left: -7px;
-          top: calc(50% - 7px);
+        @else {
+          left: calc(50% - 14px);
         }
-        @else if($skin-name == 'Material3') {
-          margin-left: -10px;
-          top: calc(50% - 12px);
+        top: 0;
+        @if $skin-name == 'fluent2' {
+          @include alignment(20px, calc(50% - 10px), 'vertical');
         }
-        @else {
-          @if ($skin-name == 'tailwind') {
-            margin-left: -6px;
+        @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5') {
+          margin-top: -2px;
+        }
+
+        .e-tick {
+          @if ($skin-name == 'material' or $skin-name == 'material-dark') {
+            background-repeat: no-repeat;
           }
           @else {
-            margin-left: -8px;
+            background-repeat: repeat-x;
           }
-          top: calc(50% - 8px);
-        }
-      }
 
-      &.e-scale-both {
-        .e-handle {
-          @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
-            margin-left: -8px;
-            top: calc(50% - 7px);
+          &.e-first-tick {
+            @if ($skin-name == 'material' or $skin-name == 'material-dark') {
+              background-position-y: top;
+            }
+            @else {
+              background-position-y: center;
+            }
           }
-        }
 
-        .e-range {
-          height: $slider-range-height;
-          @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
-            top: calc(50% - 2px);
+          &.e-last-tick {
+            @if ($skin-name == 'material' or $skin-name == 'material-dark') {
+              background-position-y: bottom;
+            }
+            @else {
+              background-position-y: bottom;
+              margin-top: 2px;
+              @if ($skin-name == 'tailwind') {
+                margin-top: 3px;
+              }
+            }
           }
         }
       }
 
-      .e-range {
-        height: $slider-range-height;
-        @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-          top: calc(50% - 1px);
-        }
-        @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI') {
-          top: calc(50% - 2px);
-        }
-        @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5') {
-          top: calc(50% - 3px);
-        }
-        @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'tailwind' or $skin-name == 'Material3') {
-          top: calc(50% - 4px);
-        }
-      }
+      &.e-h-scale {
+        @if ($skin-name == 'tailwind') {
+          &.e-tick-after {
+            top: 3px;
+          }
 
-      .e-limits {
-        background-color: $slider-limit-bar-color;
-        height: $slider-limit-bar-horizontal-height;
-        position: absolute;
-        top: $slider-limit-bar-top;
-        @if ($skin-name == 'bootstrap5') {
-          border-radius: 4px;
+          &.e-tick-before {
+            top: 15px;
+          }
         }
-        @if ($skin-name == 'FluentUI') {
-          border-radius: 2px;
+
+        .e-tick {
+          display: inline-block;
+          @if ($skin-name == 'material' or $skin-name == 'material-dark') {
+            background-repeat: no-repeat;
+          }
+
+          @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            background-repeat: repeat-y;
+            @include alignment(100%, 0, 'horizontal');
+          }
+
+          .e-tick-value {
+            &.e-tick-before,
+            &.e-tick-both:first-child {
+              top: -18px;
+            }
+
+            &.e-tick-after,
+            &.e-tick-both {
+              bottom: -20px;
+            }
+          }
+
+          &.e-first-tick {
+            @include tick-background-position(left);
+          }
+
+          &.e-last-tick {
+            @include tick-background-position(right);
+          }
         }
       }
     }
 
-    &.e-vertical {
-      height: inherit;
-      @if ($skin-name == 'tailwind') {
-        padding: 28px 0;
-      }
-      @else if ($skin-name == 'FluentUI') {
-        padding: 32px 0;
-      }
-      @else {
-        padding: 38px 0;
-      }
-      width: 48px;
-      @if ($skin-name == 'bootstrap4') {
-        padding: 30px 0;
+    .e-scale .e-tick {
+      @if ($skin-name == 'material' or $skin-name == 'material-dark') {
+        visibility: hidden;
       }
 
-      @if ($skin-name == 'bootstrap5') {
-        padding: 28px 0;
+      .e-tick-value {
+        @if ($skin-name == 'material' or $skin-name == 'material-dark') {
+          visibility: visible;
+        }
       }
+    }
 
-      .e-slider {
-        height: 100%;
-        @if ($skin-name == 'FluentUI') {
-          left: calc(50% - 15px);
+    &.e-horizontal {
+      &.e-scale-both {
+        .e-scale {
+          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI') {
+            top: 12px;
+          }
+          @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
+            top: 15px;
+          }
         }
-        @else {
-          left: calc(50% - 16px);
+
+        .e-slider-track {
+          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI') {
+            border-color: $slider-track-border-color;
+            border-radius: 1px;
+            border-style: solid;
+            border-width: 5px 0;
+            @include alignment(14px, calc(50% - 3px), 'horizontal');
+            margin-top: -4px;
+          }
+          @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
+            border-color: $slider-track-border-color;
+            border-radius: 4px;
+            border-style: solid;
+            border-width: 4px;
+            @include alignment(14px, calc(50% - 6px), 'horizontal');
+          }
         }
-        position: relative;
-        width: 32px;
       }
+    }
 
-      .e-slider-track {
-        @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
-          background: $slider-track-color;
-        }
-        @if ($skin-name != 'highcontrast' and $skin-name != 'highcontrast-light' and $skin-name != 'FluentUI' and $skin-name != 'Material3') {
-          background: $slider-handle-start-border-color;
-        }
-        bottom: 0;
-        height: 100%;
-        position: absolute;
-        @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
-          @if ($skin-name == 'tailwind') {
-            left: calc(50%);
+    &.e-vertical {
+      &.e-scale-both {
+        .e-scale {
+          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI') {
+            right: 12px;
           }
-          @else {
-            left: calc(50% - 2px);
+          @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
+            right: 11px;
           }
-          overflow: hidden;
-          width: 4px;
-        }
-        @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
-          left: calc(50% - 4px);
-          overflow: hidden;
-          width: 8px;
-        }
-        @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
-          border: 1px solid $slider-track-border-color;
-          border-radius: 3px;
-          left: calc(50% - 5px);
-          overflow: hidden;
-          width: 10px;
-        }
-        @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5') {
-          left: calc(50% - 3px);
-          overflow: hidden;
-          width: 6px;
         }
-        @if ($skin-name == 'bootstrap4') {
-          border-radius: 6px;
-        }
-        @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-          left: calc(50% - 1px);
-          overflow: hidden;
-          width: 2px;
-        }
-        @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
-          border-radius: 4px;
-        }
-        @if ($skin-name == 'FluentUI') {
-          border-radius: 2px;
-        }
-      }
 
-      &.e-small-size {
-        &.e-slider-btn {
-          height: 100%;
-          padding: $slider-button-vertical-padding;
+        .e-slider-track {
+          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
+            border-color: $slider-track-border-color;
+            border-radius: 1px;
+            border-style: solid;
+            border-width: 0 5px;
+            margin-left: -7px;
+            @include alignment(14px, calc(50% - 1px), 'vertical');
+          }
+        }
 
-          .e-slider {
-            height: 100%;
-            width: $slider-height;
+        .e-range {
+          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI') {
+            margin-left: -1px;
           }
         }
       }
+    }
 
-      @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-        .e-first-button {
-          bottom: 0;
-          margin-right: $slider-btn-center-align;
-          right: 50%;
-
-          .e-button-icon {
-            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAjVBMVEUAAAD////////////////////////+/v7////+/v7////////+/v7////////+/v7+/v7+/v7+/v7////+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7////1kjJ6AAAALnRSTlMABAgMEBQYHCAkKDA4QERITFRcYGRodHyDj5OXn6Ons7e7v8vP09ff5+vv8/f7zZvJMAAAAItJREFUeAHdyVcagjAQBsAfUVTAXsTeSTRm7388i/kUQjYHYF4H9bAUXjuEV/KQEdC98f9I8dLXxJngY879CsbG/ccARuPsetHCT1tWXyUoSDXZRiiZ2p/Bsi7/HrbgVPw8REUk/n+P4ZAoMvQATmMyFmBk39+CExzefwnBauZEsgOPWOkevIYz1NEToo45F58KJy0AAAAASUVORK5CYII=');
-            background-repeat: no-repeat;
-            background-size: cover;
-            display: inline-block;
-            height: 8px;
-            left: calc(50% - 3.8px);
-            position: absolute;
-            top: calc(50% - 2.7px);
-            width: 8px;
+    &.e-scale-both {
+      &.e-vertical {
+        &.e-small-size,
+        .e-scale {
+          &.e-h-scale {
+            @if $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI' {
+              margin-left: -7px;
+            }
           }
         }
+      }
+    }
 
-        .e-second-button {
-          margin-right: $slider-btn-center-align;
-          right: 50%;
-          top: 0;
-
-          .e-button-icon {
-            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAjVBMVEUAAAD////////////////////////////////+/v7////+/v7+/v7////////+/v7+/v7////+/v7////+/v7+/v7////+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7////wrNfvAAAALnRSTlMABAgMEBQYICgsMDQ4QERITFBcYGhseHyDi5Obn6Ort7u/x8/X29/j5+vv8/f77y3LJgAAAI1JREFUeAHdyVeagjAUBtCbYQTsXewFENGYf//LsyB8kORmAZzXQ600mLrfz2XX9X8xcO0Qb4+3s2B/ia8N9yOFwtz+wR0/z77tvQSVm0+mI2piYXyEhp3+E2gWzQ8lNGpY//8UhjygijjBIvGotIbVofwZGFHxPQmGGn/ez8B6hETiAofUo1XmtKVWeAEhzjgqqZr/lwAAAABJRU5ErkJggg==');
-            background-repeat: no-repeat;
-            background-size: cover;
-            display: inline-block;
-            height: 8px;
-            left: calc(50% - 3.8px);
-            position: absolute;
-            top: calc(50% - 4.7px);
-            width: 8px;
+    &.e-vertical {
+      &.e-scale-both {
+        .e-scale.e-v-scale {
+          @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4') {
+            right: 10px;
           }
         }
       }
-      @else if ($skin-name != 'highcontrast' and $skin-name != 'highcontrast-light') {
-        .e-first-button {
-          bottom: 0;
-          margin-right: $slider-btn-center-align;
-          right: 50%;
+    }
 
-          @if $skin-name == 'Material3' {
-            margin-right: $slider-btn-vertical-center-align;
-          }
+    .e-scale.e-v-scale {
+      @if ($skin-name == 'tailwind') {
+        &.e-tick-after {
+          left: calc(50% - 17px);
+        }
+
+        &.e-tick-before {
+          left: calc(50% - 7px);
+        }
+      }
 
-          @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $skin-name != 'Material3') {
-            .e-button-icon {
-              background-image: $slider-button-vdown-bg-image;
-              background-repeat: no-repeat;
-              background-size: cover;
-              display: inline-block;
-              height: 8px;
-              left: calc(50% - 4px);
-              position: absolute;
-              top: calc(50% - 3.6px);
-              width: 8px;
+      .e-tick {
+        .e-tick-value {
+          @if ($skin-name == 'material' or $skin-name == 'material-dark') {
+            &.e-tick-before {
+              right: 26px;
             }
-          }
-          @else if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
-            .e-button-icon {
-              font-family: 'e-icons';
+
+            &.e-tick-after {
+              left: 27px;
             }
 
-            .e-button-icon::before {
-              color: $slider-button-icon-bg-color;
-              @if ($skin-name == 'bootstrap5') {
-                content: '\e734';
-                font-size: 18px;
-              }
-              @else if ($skin-name == 'Material3') {
-                content: '\e734';
-                font-size: 16px;
-              }
-              @else {
-                content: '\e734';
-                font-size: 14px;
+            &.e-tick-both {
+              right: 41px;
+
+              &:first-child {
+                left: 39px;
               }
             }
           }
           @else {
-            .e-button-icon::before {
-              font-size: 18px;
-              @if ($skin-name == 'tailwind') {
-                color: $slider-button-icon-bg-color;
-                content: '\e729';
-              }
-              @else {
-                content: '\e729';
-              }
+            &.e-tick-before {
+              right: 17px;
             }
-          }
-        }
 
-        .e-second-button {
-          margin-right: $slider-btn-center-align;
-          right: 50%;
-          top: 0;
-
-          @if $skin-name == 'Material3' {
-            margin-right: $slider-btn-vertical-center-align;
-          }
-
-          @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $skin-name != 'Material3') {
-            .e-button-icon {
-              background-image: $slider-button-vup-bg-image;
-              background-repeat: no-repeat;
-              background-size: cover;
-              display: inline-block;
-              height: 8px;
-              left: calc(50% - 4px);
-              position: absolute;
-              top: calc(50% - 4.5px);
-              width: 8px;
-            }
-          }
-          @else if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
-            .e-button-icon {
-              font-family: 'e-icons';
+            &.e-tick-after {
+              left: 19px;
             }
 
-            .e-button-icon::before {
-              color: $slider-button-icon-bg-color;
-              @if ($skin-name == 'bootstrap5') {
-                content: '\e7dd';
-                font-size: 18px;
-              }
-              @else if ($skin-name == 'Material3') {
-                content: '\e7dd';
-                font-size: 16px;
+            &.e-tick-both {
+              @if $skin-name == 'bootstrap4' {
+                right: 30px;
               }
               @else {
-                content: '\e7dd';
-                font-size: 14px;
-              }
-            }
-          }
-          @else {
-            .e-button-icon::before {
-              font-size: 18px;
-              @if ($skin-name == 'tailwind') {
-                color: $slider-button-icon-bg-color;
-                content: '\e776';
+                right: 44px;
               }
-              @else {
-                content: '\e7a0';
+
+              &:first-child {
+                @if $skin-name == 'bootstrap4' {
+                  left: 30px;
+                }
+                @else {
+                  left: 42px;
+                }
               }
             }
           }
         }
       }
-      @else {
-        .e-first-button {
-          bottom: 0;
-          margin-right: $slider-btn-center-align;
-          right: 50%;
-
-          .e-button-icon {
-            font-family: 'e-icons';
-          }
-
-          .e-button-icon::before {
-            color: $slider-button-icon-color;
-            content: '\e829';
-            font-size: 9px;
-            font-weight: 600;
-            left: calc(50% - 4.15px);
-            position: absolute;
-            top: calc(50% - 4px);
-            transform: rotate(-90deg);
-          }
-        }
-
-        .e-second-button {
-          margin-right: $slider-btn-center-align;
-          right: 50%;
-          top: 0;
+    }
+  }
 
-          .e-button-icon {
-            font-family: 'e-icons';
-          }
+  .e-slider-tooltip.e-tooltip-wrap.e-popup {
+    @if ($skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3' or $skin-name == 'Material3-dark') {
+      background-color: $slider-handle-bg-color;
+      border: 0;
+      border-radius: 8px;
+      @include cursor-grab;
+      opacity: 1;
 
-          .e-button-icon::before {
-            color: $slider-button-icon-color;
-            content: '\e829';
-            font-size: 9px;
-            font-weight: 600;
-            left: calc(50% - 5.5px);
-            position: absolute;
-            top: calc(50% - 5.8px);
-            transform: rotate(90deg);
-          }
-        }
+      &.e-popup.e-popup-close {
+        display: block;
+        opacity: 0;
       }
 
-      &.e-scale-both {
-        .e-slider {
-          .e-handle {
-            margin-bottom: $slider-v-handle-margin;
-            @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
-              left: calc(50% - 9px);
-            }
-          }
-        }
-      }
+      &.e-material-tooltip-start {
+        background-color: $slider-handle-border-color;
 
-      .e-slider {
-        .e-handle {
-          margin-bottom: $slider-v-handle-margin;
-          @if ($skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'bootstrap5') {
-            left: calc(50% - 6px);
-          }
-          @else if($skin-name == 'bootstrap4') {
-            left: calc(50% - 7px);
-          }
-          @else if($skin-name == 'tailwind') {
-            left: calc(50% - 4px);
-          }
-          @else if($skin-name == 'Material3') {
-            left: calc(50% - 10px);
-          }
-          @else {
-            left: calc(50% - 8px);
+        @if $skin-name != 'Material3' and $skin-name != 'Material3-dark' {
+          .e-arrow-tip-inner {
+            color: $grey-black;
+            opacity: 0;
           }
         }
 
-        .e-range {
-          @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
-            left: calc(50% - 4px);
-            width: 8px;
-          }
-          @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'Material3') {
-            left: calc(50% - 3px);
-            width: 6px;
-          }
-          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
-            @if ($skin-name == 'tailwind') {
-              left: calc(50%);
-            }
-            @else {
-              left: calc(50% - 2px);
-            }
-            @if ($skin-name == 'bootstrap5') {
-              width: 6px;
-            }
-            @else {
-              width: 4px;
-            }
-          }
-          @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
-            left: calc(50% - 3px);
-            width: 6px;
+        .e-arrow-tip-outer {
+          &.e-tip-bottom {
+            border-top-color: $slider-handle-border-color;
           }
-          @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-            left: calc(50% - 1px);
-            width: 2px;
+          &.e-tip-top {
+            border-bottom-color: $slider-handle-border-color;
           }
-        }
-
-        .e-limits {
-          background-color: $slider-limit-bar-color;
-          left: $slider-limit-bar-left;
-          position: absolute;
-          width: $slider-limit-bar-vertical-width;
-          @if ($skin-name == 'bootstrap5') {
-            border-radius: 4px;
+          &.e-tip-right {
+            border-left-color: $slider-handle-border-color;
           }
-          @if ($skin-name == 'FluentUI') {
-            border-radius: 2px;
+          &.e-tip-left {
+            border-right-color: $slider-handle-border-color;
           }
         }
       }
-    }
-
-    .e-range {
-      border-radius: $slider-range-border-radius;
-      position: absolute;
-      transition: left 300ms ease-out, right 300ms ease-out, bottom 300ms ease-out, width 300ms ease-out, height 300ms ease-out;
 
-      &.e-drag-horizontal {
-        cursor: pointer;
+      &.e-tooltip-active {
+        @include cursor-grabbing;
       }
 
-      &.e-drag-vertical {
-        cursor: pointer;
+      .e-arrow-tip {
+        visibility: visible;
       }
-    }
 
-    .e-slider {
-      box-sizing: border-box;
-      cursor: $slider-cursor;
-      display: block;
-      outline: 0 none;
-      padding: 0;
-      position: relative;
+      .e-tip-content {
+        background-color: transparent;
+        @include size(16px, 100%);
+        overflow: hidden;
+        padding: 0 8px;
+        @if $skin-name != 'Material3' and $skin-name != 'Material3-dark' {
+          text-align: center;
+        }
+        @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3' or $skin-name == 'Material3-dark' {
+          top: calc(50% - 8px);
+          position: relative;
+          line-height: 16px;
+        }
+        @else {
+          top: calc(50% - 10px);
+          left: calc(50% - 36px);
+        }
 
-      .e-handle {
-        border-radius: $slider-border-radius-handle;
-        @if ($skin-name == 'tailwind') {
-          box-shadow: $slider-handle-box-shadow;
+        &.e-material-tooltip-show {
+          color: $slider-material-tooltip-content-color;
         }
-        box-sizing: border-box;
-        cursor: $slider-handle-hover-cursor;
-        height: $slider-handle-height;
-        outline: none;
-        position: absolute;
-        touch-action: none;
-        transition: left 300ms ease-out, right 300ms ease-out, bottom 300ms ease-out, transform 300ms ease-out;
-        width: $slider-handle-width;
-        z-index: 10;
 
-        &.e-handle-active {
-          @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
-            background-color: $slider-active-handle-bg-color;
-            border-color: $slider-hover-handle-color;
-          }
+        &.e-material-tooltip-hide {
+          color: transparent;
         }
+      }
 
-        @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-          /* stylelint-disable */
-          cursor: -webkit-grab;
-          cursor: grab;
-          /* stylelint-enable */
+      .e-arrow-tip-inner {
+        color: $slider-handle-bg-color;
+      }
 
-          &.e-handle-active {
-            /* stylelint-disable */
-            cursor: -webkit-grabbing;
-            cursor: grabbing;
-            /* stylelint-enable */
-          }
+      .e-arrow-tip-outer {
+        &.e-tip-bottom {
+          border-top-color: $slider-handle-bg-color;
+        }
+        &.e-tip-top {
+          border-bottom-color: $slider-handle-bg-color;
+        }
+        &.e-tip-right {
+          border-left-color: $slider-handle-bg-color;
+        }
+        &.e-tip-left {
+          border-right-color: $slider-handle-bg-color;
+        }
+      }
 
-          &.e-handle-start {
-            background-color: $slider-handle-start-background;
-            border: $slider-start-handle-border-size;
-          }
+      &.e-tooltip-wrap.e-popup.e-material-default {
+        background-color: $slider-handle-bg-color;
+        border: 0;
+        border-bottom-left-radius: 50%;
+        border-bottom-right-radius: 0%;
+        border-top-left-radius: 50%;
+        border-top-right-radius: 50%;
+        @include cursor-grab;
+        opacity: 1;
 
-          &::after {
-            -moz-box-sizing: content-box;
-            -ms-transform: scale(0);
-            -webkit-box-sizing: content-box;
-            -webkit-transform: scale(0);
-            border: 0 solid;
-            border-radius: 50%;
-            box-sizing: content-box;
-            content: '';
-            filter: alpha(opacity=26);
-            height: 32px;
-            left: calc(50% - 16px);
-            opacity: .26;
-            position: $slider-handle-after-position;
-            top: calc(50% - 16px);
-            transform: scale(0);
-            transition: transform .4s cubic-bezier(.25, .8, .25, 1);
-            width: 32px;
-            z-index: -1;
-          }
+        &.e-material-tooltip-start {
+          background-color: $slider-handle-border-color;
         }
 
-        &.e-tab-handle {
-          @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-            &.e-handle-start::after {
-              background-color: $slider-tab-background;
-              opacity: .38;
-            }
+        &.e-tooltip-active {
+          @include cursor-grabbing;
+        }
 
-            &::after {
-              -ms-transform: scale(1);
-              -webkit-transform: scale(1);
-              background-color: $slider-color;
-              transform: scale(1);
-            }
-          }
+        .e-arrow-tip {
+          visibility: hidden;
+        }
 
-          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI') {
-            border-color: $slider-tab-border-color;
-          }
+        &.e-slider-horizontal-before {
+          @include slider-transform(45deg);
+        }
 
-          /* stylelint-disable */
-          @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
-            background-color: $slider-tab-background;
-            border-color: $slider-tab-border-color;
-            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
-          }
-          @if ($skin-name == 'bootstrap4') {
-            background-color: $slider-tab-background;
-            border-color: $slider-tab-border-color;
-            box-shadow: $slider-tab-active-box-shadow;
-          }
-          @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'Material3') {
-            @if $skin-name == 'Material3' {
-              background: $slider-tab-background;
-            }
-            @else {
-              background-color: $slider-tab-background;
-              border: $slider-tab-border;
-            }
-            box-shadow: $slider-tab-active-box-shadow;
-          }
-          /* stylelint-enable */
+        &.e-slider-horizontal-after {
+          @include slider-transform(225deg);
         }
-      }
 
-      .e-tab-track {
-        @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI') {
-          background-color: $slider-tab-track-color;
+        &.e-slider-vertical-before {
+          @include slider-transform(-45deg);
         }
-      }
-    }
 
-    .e-tick-before {
-      &.e-scale {
-        &.e-h-scale {
-          .e-tick {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
-              height: $tick-after-height;
-              top: $tick-after-top;
-            }
-            @else {
-              background-position: bottom;
-              height: 50%;
-              top: 1px;
-            }
-          }
+        &.e-slider-vertical-after {
+          @include slider-transform(-225deg);
+        }
 
-          .e-large {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
-              height: $largetick-before-height;
-              top: $largetick-before-top;
-            }
+        .e-tip-content {
+          background-color: transparent;
+          @include size(16px, 100%);
+          overflow: hidden;
+          padding: 0;
+          text-align: center;
+          @if $skin-name == 'material' or $skin-name == 'material-dark' {
+            top: calc(50% - 8px);
+          }
+          @else {
+            top: calc(50% - 10px);
+            left: calc(50% - 16px);
           }
-        }
 
-        &.e-v-scale {
-          .e-tick {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
-              left: $tick-after-left;
-              width: $tick-after-height;
-            }
-            @else {
-              background-position: right;
-              left: 1px;
-              width: 50%;
-            }
+          &.e-material-tooltip-show {
+            color: $slider-material-tooltip-content-color;
           }
 
-          .e-large {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
-              left: $largetick-before-left;
-              width: $largetick-before-height;
-            }
+          &.e-material-tooltip-hide {
+            color: transparent;
           }
         }
       }
     }
+    @else {
+      @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
+        background-color: $slider-active-handle-bg-color;
+        border: 1px solid $slider-hover-handle-color;
+      }
 
-    .e-tick-after {
-      &.e-scale {
-        &.e-h-scale {
-          .e-tick {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
-              height: $tick-before-height;
-              top: $tick-before-top;
-            }
-            @else {
-              background-position-x: center;
-              height: 50%;
-              top: calc(50% - 1px);
-            }
-          }
+      .e-tip-content {
+        padding: $slider-tooltip-padding;
+        text-align: center;
 
-          .e-large {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
-              height: $largetick-after-height;
-              top: $largetick-after-top;
-            }
-          }
+        @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
+          color: $slider-button-icon-color;
         }
+      }
+    }
+  }
 
-        &.e-v-scale {
-          .e-tick {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
-              left: $tick-before-left;
-              width: $tick-before-height;
-            }
-            @else {
-              background-position: left;
-              left: calc(50% - 1px);
-              width: 50%;
-            }
-          }
+  .e-slider-horizantal-color {
+    @include alignment(100%, 0, 'horizontal');
+    position: absolute;
+  }
 
-          .e-large {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
-              left: $largetick-after-left;
-              width: $largetick-after-height;
-            }
-          }
+  .e-slider-vertical-color {
+    position: absolute;
+    @include alignment(100%, -1px, 'vertical');
+  }
+
+  .e-bigger {
+    @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+      .e-slider-tooltip.e-tooltip-wrap.e-popup {
+        .e-tip-content {
+          padding: $slider-tooltip-padding;
         }
       }
     }
-
-    &.e-scale-before {
-      .e-scale {
-        &.e-v-scale {
-          @if ($skin-name != 'material' and $skin-name != 'material-dark') {
-            right: 9px;
-          }
+    @else {
+      &.e-slider-tooltip.e-tooltip-wrap.e-popup {
+        .e-tip-content {
+          font-size: 11px;
+          line-height: 16px;
         }
       }
     }
+  }
 
-    &.e-scale-after {
-      .e-scale {
-        &.e-v-scale {
-          @if ($skin-name != 'material' and $skin-name != 'material-dark') {
-            right: 9px;
-          }
+  .e-bigger .e-control-wrapper.e-slider-container,
+  .e-control-wrapper.e-slider-container.e-bigger {
+    @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+      .e-slider {
+        .e-handle {
+          @include size($slider-handle-mobile-height, $slider-handle-mobile-width);
         }
       }
-    }
 
-    .e-tick-both {
-      &.e-scale {
-        &.e-h-scale {
-          .e-tick {
-            @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
-              height: calc(100% - 6px);
-              top: -11px;
-            }
-            @if ($skin-name == 'bootstrap4') {
-              height: 16px;
-              top: -8px;
-            }
-            @if ($skin-name == 'bootstrap5') {
-              height: 18px;
-              top: -11px;
-            }
-            @if ($skin-name == 'Material3') {
-              height: 18px;
-              top: -13px;
-            }
-            @if ($skin-name == 'tailwind') {
-              height: 16px;
-              top: -16px;
-            }
+      @if ($skin-name == 'FluentUI') {
+        .e-slider-button {
+          @include size(20px, 20px);
+        }
 
-            @if ($skin-name == 'FluentUI') {
-              height: 30px;
-              top: -17px;
-            }
-            @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark') {
-              height: calc(100% - 3px);
-              top: -12.5px;
-            }
-            @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
-              height: calc(100% - 6px);
-              top: -12px;
-            }
-            @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-              background-position: center;
-              height: 99%;
+        &.e-horizontal {
+          .e-first-button,
+          .e-second-button {
+            margin-top: $slider-touch-btn-center-align;
+
+            .e-button-icon::before {
+              font-size: 17px;
             }
           }
+        }
 
-          .e-large {
-            @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
-              height: 100%;
-              top: -8px;
-            }
-            @if ($skin-name == 'bootstrap4') {
-              height: 22px;
-              top: -5px;
-            }
-            @if ($skin-name == 'bootstrap5') {
-              height: 26px;
-              top: -7px;
-            }
-            @if ($skin-name == 'tailwind') {
-              height: 24px;
-              top: -12px;
-            }
-            @if ($skin-name == 'FluentUI') {
-              height: 38px;
-              top: -13px;
-            }
-            @if ($skin-name == 'Material3') {
-              height: 26px;
-              top: -10px;
-            }
-            @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
-              height: calc(100% + 3px);
-              top: -9px;
-            }
-            @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
-              height: calc(100% + 2px);
-              top: -8px;
+        &.e-vertical {
+          .e-first-button,
+          .e-second-button {
+            margin-right: $slider-touch-btn-center-align;
+
+            .e-button-icon::before {
+              font-size: 17px;
             }
           }
         }
+      }
 
-        &.e-v-scale {
-          .e-tick {
-            @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
-              background-position: center;
-              width: 100%;
+      @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
+        .e-slider-button {
+          @include size(18px, 18px);
+        }
+
+        &.e-vertical {
+          &.e-slider-btn {
+            @if ($skin-name == 'bootstrap5') {
+              padding: 36px 0;
             }
-            @if ($skin-name == 'bootstrap4') {
-              background-position: center;
-              left: 6px;
-              width: calc(100% - 12px);
+            @else {
+              padding: 34px 0;
             }
+          }
+
+          .e-first-button,
+          .e-second-button {
             @if ($skin-name == 'bootstrap5' or $skin-name == 'Material3') {
-              background-position: center;
-              left: 5px;
-              width: 18px;
-            }
-            @if ($skin-name == 'tailwind') {
-              left: 6px;
-              width: 16px;
-            }
-            @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-              background-position: center;
-              width: 100%;
-            }
-            @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI') {
-              left: 0;
-              width: calc(100% - 2px);
+              margin-right: -12px;
             }
-            @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
-              left: 2px;
-              width: calc(100% - 6px);
+            @else {
+              margin-right: -9px;
             }
           }
 
-          .e-large {
-            @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
-              width: 100%;
-            }
-            @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5') {
-              left: 3px;
-              width: calc(100% - 6px);
-            }
-            @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'Material3') {
-              left: 1px;
-              width: 26px;
-            }
-            @if ($skin-name == 'tailwind') {
-              left: 3px;
-              width: 24px;
+          .e-slider {
+            .e-slider-track {
+              @include alignment(8px, calc(50% - 4px), 'vertical');
+              @if $skin-name == 'fluent2' {
+                border-radius: 8px;
+              }
             }
-            @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-              width: 100%;
+
+            @if $skin-name == 'fluent2' {
+              &.e-scale {
+                margin-top: $slider-touch-center-align;
+              }
+              &.e-v-scale {
+                left: calc(50% - 14px);
+              }
             }
-            @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
-              left: -2px;
-              width: calc(100% + 3px);
+
+            .e-range {
+              @include alignment(8px, calc(50% - 4px), 'vertical');
             }
           }
         }
-      }
-    }
-
-    .e-scale {
-      box-sizing: content-box;
-      font-family: $slider-scale-font-family;
-      height: 28px;
-      line-height: normal;
-      list-style: none outside none;
-      margin: 0;
-      outline: 0 none;
-      padding: 0;
-      position: absolute;
-      top: $slider-scale-top;
-      width: 100%;
-      z-index: 1;
-      @if ($skin-name != 'material' and $skin-name != 'material-dark') {
-        font-size: $slider-scale-font-size;
-        margin-top: $slider-center-align;
-      }
 
-      @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
-        z-index: -1;
-      }
+        &.e-horizontal .e-slider {
+          .e-limits {
+            @include alignment(8px, calc(50% - 4px), 'horizontal');
+            @if ($skin-name == 'bootstrap5' and $skin-name == 'FluentUI') {
+              border-radius: $slider-range-border-radius;
+            }
+          }
+        }
 
-      @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
-        &.e-tick-both {
-          top: 12px;
+        &.e-vertical .e-slider {
+          .e-limits {
+            @include alignment(8px, calc(50% - 4px), 'vertical');
+            @if ($skin-name == 'bootstrap5' and $skin-name == 'FluentUI') {
+              border-radius: $slider-range-border-radius;
+            }
+          }
         }
       }
 
-      .e-tick {
-        @if ($theme-name == 'bootstrap5-dark' or $theme-name == 'tailwind-dark' or $theme-name == 'fluentui-dark') {
-          background-image: $slider-scale-tick-image-dark;
-        }
-        @else {
-          background-image: $slider-scale-tick-image;
-        }
-        cursor: $slider-cursor;
-        outline: none;
-        position: relative;
-        user-select: none;
-        @if ($skin-name != 'material' and $skin-name != 'material-dark') {
-          background-position: center center;
-        }
+      @if ($skin-name == 'bootstrap5' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
 
-        @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
-          &.e-large {
-            @if ($skin-name != 'bootstrap4') {
-              background-image: $slider-scale-tick-image-dark;
+        &.e-horizontal,
+        &.e-vertical {
+          .e-slider-button.e-first-button,
+          .e-slider-button.e-second-button {
+            border-radius: 12px;
+            @include size(24px, 24px);
+            @if $skin-name == 'Material3' {
+              padding: 0;
             }
-            @else {
-              background-image: $slider-small-scale-tick-image;
+
+            .e-button-icon::before {
+              font-size: 22px;
             }
           }
         }
 
-        .e-tick-value {
-          color: $slider-tick-font-color;
-          font-family: $slider-scale-font-family;
-          font-size: $slider-scale-font-size;
-          outline: none;
-          position: absolute;
-          user-select: none;
-          white-space: nowrap;
-          @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'Material3') {
-            line-height: 1.5;
-          }
-          @if ($skin-name == 'tailwind') {
-            line-height: 18px;
+        &.e-horizontal {
+
+          .e-slider-button.e-first-button,
+          .e-slider-button.e-second-button {
+            margin-top: -12px;
           }
-        }
-      }
 
-      &.e-v-scale {
-        height: 100%;
-        @if ($skin-name == 'tailwind') {
-          left: calc(50% - 12px);
-        }
-        @else {
-          left: calc(50% - 14px);
-        }
-        top: 0;
-        width: 28px;
-        @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5') {
-          margin-top: -2px;
-        }
+          .e-tick-both {
+            &.e-scale {
+              &.e-h-scale {
+                .e-tick {
+                  @include alignment(24px, -14px, 'horizontal');
+                }
 
-        .e-tick {
-          @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-            background-repeat: no-repeat;
+                .e-large {
+                  @if $skin-name == 'fluent2' {
+                    @include alignment(32px, -6px, 'horizontal');
+                  }
+                  @else {
+                    @include alignment(32px, -10px, 'horizontal');
+                  }
+                }
+              }
+            }
           }
 
-          @if ($skin-name != 'material' and $skin-name != 'material-dark') {
-            background-repeat: repeat-x;
+          .e-tick-before {
+            &.e-scale {
+              &.e-h-scale {
+                .e-tick {
+                  @include alignment($tick-after-mobile-height, $tick-before-mobile-top, 'horizontal');
+                }
+
+                .e-large {
+                  @include alignment($largetick-before-mobile-height, $tick-before-mobile-top, 'horizontal');
+                }
+              }
+            }
           }
 
-          &.e-first-tick {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
-              background-position-y: center;
+          .e-tick-after {
+            &.e-scale {
+              &.e-h-scale {
+                .e-tick {
+                  @include alignment($tick-after-mobile-height, $tick-after-mobile-top, 'horizontal');
+                }
+
+                .e-large {
+                  @include alignment($largetick-before-mobile-height, $largetick-after-mobile-top, 'horizontal');
+                }
+              }
             }
-            @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-              background-position-y: top;
+          }
+        }
+
+        &.e-vertical {
+
+          .e-tick-both {
+            &.e-scale {
+              .e-tick {
+                @include alignment(24px, 2px, 'vertical');
+              }
+
+              .e-large {
+                @include alignment(32px, -2px, 'vertical');
+              }
             }
           }
 
-          &.e-last-tick {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
-              background-position-y: bottom;
-              margin-top: 2px;
-              @if ($skin-name == 'tailwind') {
-                margin-top: 3px;
+          .e-tick-before {
+
+            &.e-scale {
+              &.e-v-scale {
+                .e-tick {
+                  @include alignment($tick-after-mobile-height, $tick-before-mobile-left, 'vertical');
+                }
+
+                .e-large {
+                  @include alignment($largetick-before-mobile-height, $largetick-before-mobile-left, 'vertical');
+                }
               }
             }
-            @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-              background-position-y: bottom;
+          }
+
+          .e-tick-after {
+
+            &.e-scale {
+              &.e-v-scale {
+                .e-tick {
+                  @include alignment($tick-after-mobile-height, $tick-after-mobile-left, 'vertical');
+                }
+
+                .e-large {
+                  @include alignment($largetick-before-mobile-height, $tick-after-mobile-left, 'vertical');
+                }
+              }
             }
           }
         }
       }
 
-      &.e-h-scale {
-        &.e-tick-after {
-          @if ($skin-name == 'tailwind') {
-            top: 3px;
+      @if ($skin-name == 'tailwind') {
+        .e-scale.e-h-scale {
+          &.e-tick-after {
+            top: 7px;
           }
         }
 
-        &.e-tick-before {
-          @if ($skin-name == 'tailwind') {
-            top: 15px;
+        &.e-horizontal,
+        &.e-vertical {
+          .e-slider-button.e-first-button,
+          .e-slider-button.e-second-button {
+            border-radius: 12px;
+            @include size(24px, 24px);
+
+            .e-button-icon::before {
+              font-size: 22px;
+            }
           }
         }
 
-        .e-tick {
-          display: inline-block;
-          @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-            background-repeat: no-repeat;
-          }
+        &.e-horizontal {
 
-          @if ($skin-name != 'material' and $skin-name != 'material-dark') {
-            background-repeat: repeat-y;
-            height: 100%;
-            top: 0;
+          &.e-scale-both .e-range,
+          .e-limits {
+            height: 6px;
           }
 
-          .e-tick-value {
-            &.e-tick-before {
-              top: -18px;
-            }
+          .e-slider-track {
+            border-radius: 6px;
+          }
 
-            &.e-tick-after {
-              bottom: -20px;
-            }
+          .e-first-button,
+          .e-second-button {
+            margin-top: -14px;
+          }
 
-            &.e-tick-both {
-              bottom: -20px;
+          .e-tick-both {
+            &.e-scale {
+              &.e-h-scale {
+                .e-tick {
+                  @include alignment(22px, -19px, 'horizontal');
+                }
 
-              &:first-child {
-                top: -18px;
+                .e-large {
+                  @include alignment(30px, -16px, 'horizontal');
+                }
               }
             }
           }
 
-          &.e-first-tick {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
-              background-position: left center;
-            }
-            @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-              background-position-x: left;
-            }
-          }
+          .e-tick-before,
+          .e-tick-after {
+            &.e-scale {
+              &.e-h-scale {
+                .e-tick {
+                  height: $tick-after-mobile-height;
+                }
 
-          &.e-last-tick {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
-              background-position: right center;
-            }
-            @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-              background-position-x: right;
+                .e-large {
+                  height: $largetick-before-mobile-height;
+                }
+              }
             }
           }
-        }
-      }
-    }
 
-    &.e-horizontal {
-      &.e-scale-both {
-        .e-scale {
-          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI') {
-            top: 12px;
-          }
-          @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
-            top: 15px;
+          &.e-scale-both {
+            .e-scale {
+              top: 17px;
+            }
           }
-        }
 
-        .e-slider-track {
-          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI') {
-            border-color: $slider-track-border-color;
-            border-radius: 1px;
-            border-style: solid;
-            border-width: 5px 0;
-            height: 14px;
-            margin-top: -4px;
-            top: calc(50% - 3px);
-          }
-          @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
-            border-color: $slider-tack-ticks-border-color;
-            border-radius: 4px;
-            border-style: solid;
-            border-width: 4px;
-            height: 14px;
-            top: calc(50% - 6px);
+          &.e-slider-btn {
+            padding: $slider-button-horizon-mobile-padding;
           }
         }
-      }
-    }
 
-    &.e-vertical {
-      &.e-scale-both {
-        .e-scale {
-          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI') {
-            right: 12px;
-          }
-          @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
-            right: 11px;
+        &.e-vertical {
+
+          &.e-scale-both .e-range,
+          .e-range {
+            width: 6px;
           }
-        }
 
-        .e-slider-track {
-          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI') {
-            border-color: $slider-track-border-color;
-            border-radius: 1px;
-            border-style: solid;
-            border-width: 0 5px;
-            left: calc(50% - 1px);
-            margin-left: -7px;
-            width: 14px;
+          .e-slider-track {
+            border-radius: 6px;
           }
-          @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
-            border-color: $slider-tack-ticks-border-color;
-            border-radius: 1px;
-            border-style: solid;
-            border-width: 0 5px;
-            left: calc(50% - 1px);
-            margin-left: -7px;
-            width: 14px;
+
+          &.e-slider-btn {
+            padding: $slider-button-vertical-mobile-padding;
           }
-        }
 
-        .e-range {
-          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI') {
-            margin-left: -1px;
+          .e-slider-button {
+            margin-right: -15px;
           }
-        }
-      }
-    }
 
-    &.e-scale-both {
-      &.e-vertical {
-        .e-scale {
-          &.e-h-scale {
-            @if $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI' {
-              margin-left: -7px;
+          .e-tick-both {
+            &.e-scale {
+              &.e-v-scale {
+                .e-tick {
+                  @include alignment(22px, 4px, 'vertical');
+                }
+
+                .e-large {
+                  @include alignment(30px, -0, 'vertical');
+                }
+              }
             }
           }
-        }
 
-        &.e-small-size {
-          .e-scale {
-            &.e-h-scale {
-              @if $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI' {
-                margin-left: -7px;
+          .e-tick-before,
+          .e-tick-after {
+
+            &.e-scale {
+              &.e-v-scale {
+                .e-tick {
+                  width: $tick-after-mobile-height;
+                }
+
+                .e-large {
+                  width: $largetick-before-mobile-height;
+                }
               }
             }
           }
         }
       }
-    }
-  }
 
-  .e-control-wrapper.e-slider-container {
-    &.e-vertical {
-      &.e-scale-both {
-        .e-scale.e-v-scale {
-          @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4') {
-            right: 10px;
+      &.e-horizontal {
+        @if ($skin-name == 'bootstrap5') {
+          &.e-slider-btn {
+            padding: 0 36px;
           }
         }
-      }
-    }
+        @if ($skin-name == 'bootstrap4') {
+          &.e-slider-btn {
+            padding: 0 34px;
+          }
 
-    .e-scale.e-v-scale {
-      &.e-tick-after {
-        @if ($skin-name == 'tailwind') {
-          left: calc(50% - 17px);
+          .e-slider-button {
+            @include size($slider-handle-mobile-buttons-height, $slider-handle-mobile-buttons-width);
+            margin-top: -9px;
+          }
         }
-      }
 
-      &.e-tick-before {
         @if ($skin-name == 'tailwind') {
-          left: calc(50% - 7px);
+          .e-slider-track,
+          .e-range {
+            height: 6px;
+          }
         }
-      }
 
-      .e-tick {
-        .e-tick-value {
-          @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-            &.e-tick-before {
-              right: 26px;
+        .e-slider {
+          @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'Material3'  or $skin-name == 'fluent2') {
+            .e-slider-track,
+            .e-range {
+              @include alignment(8px, calc(50% - 4px), 'horizontal');
             }
+          }
 
-            &.e-tick-after {
-              left: 27px;
+          .e-handle {
+            @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
+              margin-left: $slider-handle-mobile-margin-left;
+              top: $slider-handle-mobile-handle-top;
             }
+            @else {
+              margin-left: -9px;
+              top: calc(50% - 9px);
+            }
+          }
+        }
 
-            &.e-tick-both {
-              right: 41px;
-
-              &:first-child {
-                left: 39px;
+        &.e-scale-both {
+          .e-slider {
+            .e-handle {
+              @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
+                margin-left: -9px;
+                top: calc(50% - 8px);
               }
             }
           }
-          @else {
-            &.e-tick-before {
-              right: 17px;
+        }
+      }
+
+      &.e-vertical {
+        .e-slider {
+          .e-handle {
+            @if ($skin-name == 'tailwind') {
+              left: calc(50% - 5px);
+            }
+            @else if $skin-name == 'Material3' {
+              left: calc(50% - 14px);
+            }
+            @else {
+              left: calc(50% - 9px);
             }
+            margin-bottom: -9px;
+            @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
+              left: calc(50% - 8px);
+              margin-bottom: -8px;
+            }
+          }
 
-            &.e-tick-after {
-              left: 19px;
+          @if ($skin-name == 'tailwind') {
+            .e-range {
+              width: 6px;
             }
+          }
+        }
 
-            &.e-tick-both {
-              @if $skin-name == 'bootstrap4' {
-                right: 30px;
-              }
-              @else {
-                right: 44px;
+        &.e-scale-both {
+          .e-slider {
+            .e-handle {
+              @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
+                left: calc(50% - 10px);
+                margin-bottom: -9px;
               }
-
-              &:first-child {
-                @if $skin-name == 'bootstrap4' {
-                  left: 30px;
-                }
-                @else {
-                  left: 42px;
-                }
+              @if $skin-name == 'bootstrap4' {
+                left: calc(50% - 8px);
+                margin-bottom: -8px;
               }
             }
           }
         }
-      }
-    }
-  }
-
-  .e-control-wrapper.e-slider-container {
-    .e-scale .e-tick {
-      @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-        visibility: hidden;
-      }
 
-      .e-tick-value {
-        @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-          visibility: visible;
+        @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
+          .e-slider-track,
+          .e-range {
+            width: 6px;
+          }
         }
       }
-    }
-  }
 
-  .e-control-wrapper.e-slider-container:hover {
-    .e-scale .e-tick {
-      @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-        visibility: visible;
+      &.e-rtl {
+        &.e-horizontal {
+          .e-slider {
+            .e-handle {
+              @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
+                margin: 0 -8px 0 0;
+              }
+            }
+          }
+        }
       }
     }
-  }
 
-  .e-control-wrapper.e-slider-container:active {
-    .e-scale .e-tick {
-      @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-        visibility: visible;
-      }
+    .e-scale .e-tick .e-tick-value {
+      font-size: $slider-mobile-scale-font-size;
     }
   }
 
@@ -2474,16 +2122,5 @@
       visibility: visible;
     }
   }
-
-  .e-control-wrapper.e-slider-container .e-slider {
-    .e-handle.e-handle-active {
-      @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4') {
-        background-color: $slider-handle-active-bg-color;
-        border-color: $slider-handle-active-border-color;
-      }
-      @if ($skin-name == 'bootstrap4') {
-        box-shadow: $slider-handle-active-box-shadow;
-      }
-    }
-  }
+  /* stylelint-enable property-no-vendor-prefix */
 }