@syncfusion/ej2-inputs 19.4.52 → 20.1.47

package/styles/slider/_layout.scss

@@ -1,4 +1,4 @@
-@include export-module('slider-layout') {
+@include export-module('slider-layout') {
   // sass-lint:disable no-vendor-prefixes
   // sass-lint:disable no-important
 
@@ -257,6 +257,35 @@
         }
       }
 
+      @if ($skin-name == 'FluentUI') {
+        .e-slider-button {
+          height: 20px;
+          width: 20px;
+        }
+
+        &.e-horizontal {
+          .e-first-button,
+          .e-second-button {
+            margin-top: $slider-touch-btn-center-align;
+
+            .e-button-icon::before {
+              font-size: 17px;
+            }
+          }
+        }
+
+        &.e-vertical {
+          .e-first-button,
+          .e-second-button {
+            margin-right: $slider-touch-btn-center-align;
+
+            .e-button-icon::before {
+              font-size: 17px;
+            }
+          }
+        }
+      }
+
       @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5') {
         .e-slider-button {
           height: 18px;
@@ -300,7 +329,7 @@
           .e-limits {
             height: 8px;
             top: calc(50% - 4px);
-            @if ($skin-name == 'bootstrap5') {
+            @if ($skin-name == 'bootstrap5' and $skin-name == 'FluentUI') {
               border-radius: $slider-range-border-radius;
             }
           }
@@ -310,7 +339,7 @@
           .e-limits {
             left: calc(50% - 4px);
             width: 8px;
-            @if ($skin-name == 'bootstrap5') {
+            @if ($skin-name == 'bootstrap5' and $skin-name == 'FluentUI') {
               border-radius: $slider-range-border-radius;
             }
           }
@@ -652,12 +681,14 @@
           }
 
           .e-handle {
-            margin-left: -9px;
-            top: calc(50% - 9px);
-            @if($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5') {
+            @if($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
               margin-left: $slider-handle-mobile-margin-left;
               top: $slider-handle-mobile-handle-top;
             }
+            @else {
+              margin-left: -9px;
+              top: calc(50% - 9px);
+            }
           }
         }
 
@@ -683,7 +714,7 @@
               left: calc(50% - 9px);
             }
             margin-bottom: -9px;
-            @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5') {
+            @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
               left: calc(50% - 8px);
               margin-bottom: -8px;
             }
@@ -775,7 +806,7 @@
             @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 == 'highcontrast' or $skin-name == 'highcontrast-light') {
+            @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') {
@@ -791,7 +822,7 @@
                 background-position-x: right;
               }
 
-              @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
+              @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;
               }
@@ -814,7 +845,7 @@
         }
 
         .e-slider-button {
-          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
+          @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;
           }
           @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4') {
@@ -1007,7 +1038,7 @@
           margin-top: $slider-btn-center-align;
           top: 50%;
 
-          @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5') {
+          @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI') {
             .e-button-icon {
               background-image: $slider-button-hleft-bg-image;
               background-repeat: no-repeat;
@@ -1019,23 +1050,32 @@
               width: 8px;
             }
           }
-          @else if($skin-name == 'bootstrap5') {
+          @else if($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
             .e-button-icon {
               font-family: 'e-icons';
             }
 
             .e-button-icon::before {
               color: $slider-button-icon-bg-color;
-              content: '\e738';
-              font-size: 17px;
+              @if ($skin-name == 'FluentUI') {
+                content: '\e738';
+                font-size: 14px;
+              }
+              @else {
+                content: '\e738';
+                font-size: 17px;
+              }
             }
           }
           @else {
             .e-button-icon::before {
-              content: '\e761';
               font-size: 17px;
               @if ($skin-name == 'tailwind') {
                 color: $slider-button-icon-bg-color;
+                content: '\e765';
+              }
+              @else {
+                content: '\e761';
               }
             }
           }
@@ -1046,7 +1086,7 @@
           right: 0;
           top: 50%;
 
-          @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5') {
+          @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5'  and $skin-name != 'FluentUI') {
             .e-button-icon {
               background-image: $slider-button-hright-bg-image;
               background-repeat: no-repeat;
@@ -1058,24 +1098,33 @@
               width: 8px;
             }
           }
-          @else if($skin-name == 'bootstrap5') {
+          @else if($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
             .e-button-icon {
               font-family: 'e-icons';
             }
 
             .e-button-icon::before {
               color: $slider-button-icon-bg-color;
-              content: '\e75c';
-              font-size: 17px;
-              margin-left: 1px;
+              @if($skin-name == 'FluentUI') {
+                content: '\e75c';
+                font-size: 14px;
+              }
+              @else {
+                content: '\e75c';
+                font-size: 17px;
+                margin-left: 1px;
+              }
             }
           }
           @else {
             .e-button-icon::before {
-              content: '\e707';
               font-size: 18px;
               @if ($skin-name == 'tailwind') {
                 color: $slider-button-icon-bg-color;
+                content: '\e748';
+              }
+              @else {
+                content: '\e707';
               }
             }
           }
@@ -1144,10 +1193,13 @@
           overflow: hidden;
           top: calc(50% - 1px);
         }
-        @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark') {
+        @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;
+          }
         }
         @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
           background: $slider-track-color;
@@ -1213,7 +1265,7 @@
         @if ($skin-name == 'material' or $skin-name == 'material-dark') {
           top: calc(50% - 1px);
         }
-        @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark') {
+        @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') {
@@ -1232,6 +1284,9 @@
         @if ($skin-name == 'bootstrap5') {
           border-radius: 4px;
         }
+        @if ($skin-name == 'FluentUI') {
+          border-radius: 2px;
+        }
       }
     }
 
@@ -1240,6 +1295,9 @@
       @if ($skin-name == 'tailwind') {
         padding: 28px 0;
       }
+      @else if ($skin-name == 'FluentUI') {
+        padding: 32px 0;
+      }
       @else {
         padding: 38px 0;
       }
@@ -1254,22 +1312,27 @@
 
       .e-slider {
         height: 100%;
-        left: calc(50% - 16px);
+        @if ($skin-name == 'FluentUI') {
+          left: calc(50% - 15px);
+        }
+        @else {
+          left: calc(50% - 16px);
+        }
         position: relative;
         width: 32px;
       }
 
       .e-slider-track {
-        @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
+        @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI') {
           background: $slider-track-color;
         }
-        @if ($skin-name != 'highcontrast' and $skin-name != 'highcontrast-light') {
+        @if ($skin-name != 'highcontrast' and $skin-name != 'highcontrast-light' and $skin-name != 'FluentUI') {
           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') {
+        @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'tailwind' or $skin-name == 'FluentUI') {
           @if ($skin-name == 'tailwind') {
             left: calc(50%);
           }
@@ -1307,6 +1370,9 @@
         @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 {
@@ -1364,7 +1430,7 @@
           margin-right: $slider-btn-center-align;
           right: 50%;
 
-          @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5') {
+          @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI') {
             .e-button-icon {
               background-image: $slider-button-vdown-bg-image;
               background-repeat: no-repeat;
@@ -1377,23 +1443,32 @@
               width: 8px;
             }
           }
-          @else if ($skin-name == 'bootstrap5') {
+          @else if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
             .e-button-icon {
               font-family: 'e-icons';
             }
 
             .e-button-icon::before {
               color: $slider-button-icon-bg-color;
-              content: '\e734';
-              font-size: 18px;
+              @if ($skin-name == 'bootstrap5') {
+                content: '\e734';
+                font-size: 18px;
+              }
+              @else {
+                content: '\e734';
+                font-size: 14px;
+              }
             }
           }
           @else {
             .e-button-icon::before {
-              content: '\e7b3';
               font-size: 18px;
               @if ($skin-name == 'tailwind') {
                 color: $slider-button-icon-bg-color;
+                content: '\e729';
+              }
+              @else {
+                content: '\e729';
               }
             }
           }
@@ -1404,7 +1479,7 @@
           right: 50%;
           top: 0;
 
-          @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5') {
+          @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI') {
             .e-button-icon {
               background-image: $slider-button-vup-bg-image;
               background-repeat: no-repeat;
@@ -1417,23 +1492,32 @@
               width: 8px;
             }
           }
-          @else if ($skin-name == 'bootstrap5') {
+          @else if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
             .e-button-icon {
               font-family: 'e-icons';
             }
 
             .e-button-icon::before {
               color: $slider-button-icon-bg-color;
-              content: '\e7dd';
-              font-size: 18px;
+              @if ($skin-name == 'bootstrap5') {
+                content: '\e7dd';
+                font-size: 18px;
+              }
+              @else {
+                content: '\e7dd';
+                font-size: 14px;
+              }
             }
           }
           @else {
             .e-button-icon::before {
-              content: '\e7a0';
               font-size: 18px;
               @if ($skin-name == 'tailwind') {
                 color: $slider-button-icon-bg-color;
+                content: '\e776';
+              }
+              @else {
+                content: '\e7a0';
               }
             }
           }
@@ -1520,7 +1604,7 @@
             left: calc(50% - 3px);
             width: 6px;
           }
-          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'tailwind') {
+          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'tailwind' or $skin-name == 'FluentUI') {
             @if ($skin-name == 'tailwind') {
               left: calc(50%);
             }
@@ -1552,6 +1636,9 @@
           @if ($skin-name == 'bootstrap5') {
             border-radius: 4px;
           }
+          @if ($skin-name == 'FluentUI') {
+            border-radius: 2px;
+          }
         }
       }
     }
@@ -1656,7 +1743,7 @@
             }
           }
 
-          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
+          @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;
           }
 
@@ -1681,7 +1768,7 @@
       }
 
       .e-tab-track {
-        @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark') {
+        @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI') {
           background-color: $slider-tab-track-color;
         }
       }
@@ -1819,6 +1906,11 @@
               height: 16px;
               top: -16px;
             }
+
+            @if($skin-name == 'FluentUI') {
+              height: 30px;
+              top: -17px;
+            }
             @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark') {
               height: calc(100% - 3px);
               top: -12.5px;
@@ -1851,6 +1943,10 @@
               height: 24px;
               top: -12px;
             }
+            @if ($skin-name == 'FluentUI') {
+              height: 38px;
+              top: -13px;
+            }
             @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
               height: calc(100% + 3px);
               top: -9px;
@@ -1886,7 +1982,7 @@
               background-position: center;
               width: 100%;
             }
-            @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark') {
+            @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI') {
               left: 0;
               width: calc(100% - 2px);
             }
@@ -1953,7 +2049,7 @@
       }
 
       .e-tick {
-        @if ($theme-name == 'bootstrap5-dark' or $theme-name == 'tailwind-dark') {
+        @if ($theme-name == 'bootstrap5-dark' or $theme-name == 'tailwind-dark' or $theme-name == 'fluentui-dark') {
           background-image: $slider-scale-tick-image-dark;
         }
         @else {
@@ -1967,9 +2063,14 @@
           background-position: center center;
         }
 
-        @if ($skin-name == 'bootstrap4') {
+        @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
           &.e-large {
-            background-image: $slider-small-scale-tick-image;
+            @if ($skin-name != 'bootstrap4') {
+              background-image: $slider-scale-tick-image-dark;
+            }
+            @else {
+              background-image: $slider-small-scale-tick-image;
+            }
           }
         }
 
@@ -2105,7 +2206,7 @@
     &.e-horizontal {
       &.e-scale-both {
         .e-scale {
-          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark') {
+          @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') {
@@ -2114,7 +2215,7 @@
         }
 
         .e-slider-track {
-          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark') {
+          @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;
@@ -2138,7 +2239,7 @@
     &.e-vertical {
       &.e-scale-both {
         .e-scale {
-          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark') {
+          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI') {
             right: 12px;
           }
           @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
@@ -2147,7 +2248,7 @@
         }
 
         .e-slider-track {
-          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark') {
+          @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;
@@ -2168,7 +2269,7 @@
         }
 
         .e-range {
-          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark') {
+          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI') {
             margin-left: -1px;
           }
         }
@@ -2179,7 +2280,7 @@
       &.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' {
+            @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;
             }
           }
@@ -2188,7 +2289,7 @@
         &.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' {
+              @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;
               }
             }

package/styles/slider/_tailwind-definition.scss

@@ -48,7 +48,7 @@ $slider-tab-active-box-shadow: $shadow-focus-ring2 !default;
 $slider-limit-bar-horizontal-height: 4px !default;
 $slider-limit-bar-top: calc(50% - 4px) !default;
 $slider-limit-bar-vertical-width: 4px !default;
-$slider-limit-bar-left: calc(50% - 2px) !default;
+$slider-limit-bar-left: calc(50%) !default;
 
 $slider-handle-mobile-height: 16px !default;
 $slider-handle-mobile-width: 16px !default;

package/styles/slider/_theme.scss

@@ -24,8 +24,14 @@
       }
       @else {
         border-radius: 50%;
-        height: 18px;
-        width: 18px;
+        @if ($skin-name == 'FluentUI') {
+          height: 16px;
+          width: 16px;
+        }
+        @else {
+          height: 18px;
+          width: 18px;
+        }
       }
       box-sizing: border-box;
       cursor: pointer;
@@ -87,7 +93,7 @@
       }
 
       .e-range.e-tab-range {
-        @if $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' {
+        @if $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI' {
           background-color: $slider-tab-range-color;
         }
       }
@@ -97,13 +103,13 @@
         @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
           border: 1px solid $slider-normal-handle-border-color;
         }
-        @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark') {
+        @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI') {
           border: 2px solid $slider-normal-handle-border-color;
         }
         @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
           border: 2px solid $slider-normal-handle-border-color;
         }
-        @if ($skin-name != 'bootstrap' and $skin-name != 'bootstrap-dark' and $skin-name != 'bootstrap5') {
+        @if ($skin-name != 'bootstrap' and $skin-name != 'bootstrap-dark' and $skin-name != 'bootstrap5' or $skin-name != 'FluentUI') {
           border-color: $slider-normal-handle-border-color;
         }
         // @if $skin-name == 'bootstrap4' {
@@ -211,19 +217,19 @@
 .e-control-wrapper.e-slider-container {
   &:not(.e-disabled):not(.e-read-only):active {
     .e-handle {
-      @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark') {
+      @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI') {
         border-color: $slider-tab-border-color;
       }
     }
 
     .e-range {
-      @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark') {
+      @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI') {
         background-color: $slider-tab-range-color;
       }
     }
 
     .e-slider-track {
-      @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark') {
+      @if ($skin-name == 'FluentUI' or $skin-name == 'fabric' or $skin-name == 'fabric-dark') {
         background-color: $slider-tab-track-color;
       }
     }

package/styles/slider/bootstrap-dark.css

@@ -537,6 +537,7 @@
 .e-control-wrapper.e-slider-container .e-slider .e-handle {
   background-color: #6e6e6e;
   border: 1px solid #6e6e6e;
+  border-color: #6e6e6e;
 }
 
 .e-control-wrapper.e-slider-container .e-slider .e-handle.e-material-tooltip {

package/styles/slider/bootstrap.css

@@ -537,6 +537,7 @@
 .e-control-wrapper.e-slider-container .e-slider .e-handle {
   background-color: #fff;
   border: 1px solid #ccc;
+  border-color: #ccc;
 }
 
 .e-control-wrapper.e-slider-container .e-slider .e-handle.e-material-tooltip {

package/styles/slider/bootstrap4.css

@@ -103,8 +103,6 @@
 
 .e-bigger .e-control-wrapper.e-slider-container.e-horizontal .e-slider .e-handle,
 .e-control-wrapper.e-slider-container.e-bigger.e-horizontal .e-slider .e-handle {
-  margin-left: -9px;
-  top: calc(50% - 9px);
   margin-left: -8px;
   top: calc(50% - 8px);
 }

package/styles/slider/bootstrap5-dark.css

@@ -69,14 +69,12 @@
 .e-control-wrapper.e-slider-container.e-bigger.e-horizontal .e-slider .e-limits {
   height: 8px;
   top: calc(50% - 4px);
-  border-radius: 4px;
 }
 
 .e-bigger .e-control-wrapper.e-slider-container.e-vertical .e-slider .e-limits,
 .e-control-wrapper.e-slider-container.e-bigger.e-vertical .e-slider .e-limits {
   left: calc(50% - 4px);
   width: 8px;
-  border-radius: 4px;
 }
 
 .e-bigger .e-control-wrapper.e-slider-container.e-horizontal .e-slider-button.e-first-button,
@@ -199,8 +197,6 @@
 
 .e-bigger .e-control-wrapper.e-slider-container.e-horizontal .e-slider .e-handle,
 .e-control-wrapper.e-slider-container.e-bigger.e-horizontal .e-slider .e-handle {
-  margin-left: -9px;
-  top: calc(50% - 9px);
   margin-left: -8px;
   top: calc(50% - 8px);
 }
@@ -612,6 +608,10 @@
   background-position: center center;
 }
 
+.e-control-wrapper.e-slider-container .e-scale .e-tick.e-large {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAQSURBVHgBAQUA+v8AbHV9/wUNAl7Qm4m+AAAAAElFTkSuQmCC");
+}
+
 .e-control-wrapper.e-slider-container .e-scale .e-tick .e-tick-value {
   color: #e9ecef;
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
@@ -719,6 +719,7 @@
 .e-control-wrapper.e-slider-container .e-slider .e-handle {
   background-color: #0d6efd;
   border: 1px solid #0d6efd;
+  border-color: #0d6efd;
 }
 
 .e-control-wrapper.e-slider-container .e-slider .e-handle.e-material-tooltip {