npm - @syncfusion/blazor-themes - Versions diffs - 26.1.41 → 26.2.4 - Mend

@syncfusion/blazor-themes 26.1.41 → 26.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (348) hide show

package/SCSS-Themes/inputs/slider/bds.scss CHANGED Viewed

@@ -1007,7 +1007,13 @@ $slider-button-vup-bg-image:  none !default;
       &.e-scale {
         &.e-h-scale {
           .e-tick {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($tick-after-height, $tick-after-top, 'horizontal');
+              @if ($skin-name == 'material-dark') {
+                background-position: bottom;
+              }
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($tick-after-height, $tick-after-top, 'horizontal');
             }
             @else {
@@ -1017,7 +1023,10 @@ $slider-button-vup-bg-image:  none !default;
           }
           .e-large {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($largetick-before-height, $largetick-before-top, 'horizontal');
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($largetick-before-height, $largetick-before-top, 'horizontal');
             }
           }
@@ -1047,7 +1056,13 @@ $slider-button-vup-bg-image:  none !default;
       &.e-scale {
         &.e-h-scale {
           .e-tick {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($tick-before-height, $tick-before-top, 'horizontal');
+              @if ($skin-name == 'material-dark') {
+                background-position-x: center;
+              }
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($tick-before-height, $tick-before-top, 'horizontal');
             }
             @else {
@@ -1057,7 +1072,10 @@ $slider-button-vup-bg-image:  none !default;
           }
           .e-large {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($largetick-after-height, $largetick-after-top, 'horizontal');
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($largetick-after-height, $largetick-after-top, 'horizontal');
             }
           }
@@ -1133,7 +1151,12 @@ $slider-button-vup-bg-image:  none !default;
             }
             @if ($skin-name == 'material' or $skin-name == 'material-dark') {
               background-position: center;
-              height: 99%;
+              @if ($skin-name == 'material-dark') {
+                height: 12px;
+              }
+              @else {
+                height: 99%;
+              }
             }
           }
@@ -1159,6 +1182,10 @@ $slider-button-vup-bg-image:  none !default;
             @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');
             }
+            @else if ($skin-name == 'material-dark') {
+              height: 20px;
+              top: 4px;
+            }
           }
         }
@@ -1258,7 +1285,7 @@ $slider-button-vup-bg-image:  none !default;
           background-position: center center;
         }
-        @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
+        @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'material-dark') {
           &.e-large {
             @if ($skin-name != 'bootstrap4') {
               background-image: $slider-scale-tick-image-dark;
@@ -1348,7 +1375,7 @@ $slider-button-vup-bg-image:  none !default;
         .e-tick {
           display: inline-block;
           @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-            background-repeat: no-repeat;
+            background-repeat: repeat-y;
           }
           @if ($skin-name != 'material' and $skin-name != 'material-dark') {

package/SCSS-Themes/inputs/slider/bootstrap-dark.scss CHANGED Viewed

@@ -1075,7 +1075,13 @@ $slider-scale-tick-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAE
       &.e-scale {
         &.e-h-scale {
           .e-tick {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($tick-after-height, $tick-after-top, 'horizontal');
+              @if ($skin-name == 'material-dark') {
+                background-position: bottom;
+              }
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($tick-after-height, $tick-after-top, 'horizontal');
             }
             @else {
@@ -1085,7 +1091,10 @@ $slider-scale-tick-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAE
           }
           .e-large {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($largetick-before-height, $largetick-before-top, 'horizontal');
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($largetick-before-height, $largetick-before-top, 'horizontal');
             }
           }
@@ -1115,7 +1124,13 @@ $slider-scale-tick-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAE
       &.e-scale {
         &.e-h-scale {
           .e-tick {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($tick-before-height, $tick-before-top, 'horizontal');
+              @if ($skin-name == 'material-dark') {
+                background-position-x: center;
+              }
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($tick-before-height, $tick-before-top, 'horizontal');
             }
             @else {
@@ -1125,7 +1140,10 @@ $slider-scale-tick-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAE
           }
           .e-large {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($largetick-after-height, $largetick-after-top, 'horizontal');
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($largetick-after-height, $largetick-after-top, 'horizontal');
             }
           }
@@ -1201,7 +1219,12 @@ $slider-scale-tick-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAE
             }
             @if ($skin-name == 'material' or $skin-name == 'material-dark') {
               background-position: center;
-              height: 99%;
+              @if ($skin-name == 'material-dark') {
+                height: 12px;
+              }
+              @else {
+                height: 99%;
+              }
             }
           }
@@ -1227,6 +1250,10 @@ $slider-scale-tick-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAE
             @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');
             }
+            @else if ($skin-name == 'material-dark') {
+              height: 20px;
+              top: 4px;
+            }
           }
         }
@@ -1326,7 +1353,7 @@ $slider-scale-tick-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAE
           background-position: center center;
         }
-        @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
+        @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'material-dark') {
           &.e-large {
             @if ($skin-name != 'bootstrap4') {
               background-image: $slider-scale-tick-image-dark;
@@ -1416,7 +1443,7 @@ $slider-scale-tick-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAE
         .e-tick {
           display: inline-block;
           @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-            background-repeat: no-repeat;
+            background-repeat: repeat-y;
           }
           @if ($skin-name != 'material' and $skin-name != 'material-dark') {

package/SCSS-Themes/inputs/slider/bootstrap.scss CHANGED Viewed

@@ -1071,7 +1071,13 @@ $slider-tab-active-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba
       &.e-scale {
         &.e-h-scale {
           .e-tick {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($tick-after-height, $tick-after-top, 'horizontal');
+              @if ($skin-name == 'material-dark') {
+                background-position: bottom;
+              }
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($tick-after-height, $tick-after-top, 'horizontal');
             }
             @else {
@@ -1081,7 +1087,10 @@ $slider-tab-active-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba
           }
           .e-large {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($largetick-before-height, $largetick-before-top, 'horizontal');
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($largetick-before-height, $largetick-before-top, 'horizontal');
             }
           }
@@ -1111,7 +1120,13 @@ $slider-tab-active-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba
       &.e-scale {
         &.e-h-scale {
           .e-tick {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($tick-before-height, $tick-before-top, 'horizontal');
+              @if ($skin-name == 'material-dark') {
+                background-position-x: center;
+              }
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($tick-before-height, $tick-before-top, 'horizontal');
             }
             @else {
@@ -1121,7 +1136,10 @@ $slider-tab-active-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba
           }
           .e-large {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($largetick-after-height, $largetick-after-top, 'horizontal');
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($largetick-after-height, $largetick-after-top, 'horizontal');
             }
           }
@@ -1197,7 +1215,12 @@ $slider-tab-active-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba
             }
             @if ($skin-name == 'material' or $skin-name == 'material-dark') {
               background-position: center;
-              height: 99%;
+              @if ($skin-name == 'material-dark') {
+                height: 12px;
+              }
+              @else {
+                height: 99%;
+              }
             }
           }
@@ -1223,6 +1246,10 @@ $slider-tab-active-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba
             @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');
             }
+            @else if ($skin-name == 'material-dark') {
+              height: 20px;
+              top: 4px;
+            }
           }
         }
@@ -1322,7 +1349,7 @@ $slider-tab-active-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba
           background-position: center center;
         }
-        @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
+        @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'material-dark') {
           &.e-large {
             @if ($skin-name != 'bootstrap4') {
               background-image: $slider-scale-tick-image-dark;
@@ -1412,7 +1439,7 @@ $slider-tab-active-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba
         .e-tick {
           display: inline-block;
           @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-            background-repeat: no-repeat;
+            background-repeat: repeat-y;
           }
           @if ($skin-name != 'material' and $skin-name != 'material-dark') {

package/SCSS-Themes/inputs/slider/bootstrap4.scss CHANGED Viewed

@@ -1065,7 +1065,13 @@ $slider-disabled-track-color: $gray-300;
       &.e-scale {
         &.e-h-scale {
           .e-tick {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($tick-after-height, $tick-after-top, 'horizontal');
+              @if ($skin-name == 'material-dark') {
+                background-position: bottom;
+              }
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($tick-after-height, $tick-after-top, 'horizontal');
             }
             @else {
@@ -1075,7 +1081,10 @@ $slider-disabled-track-color: $gray-300;
           }
           .e-large {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($largetick-before-height, $largetick-before-top, 'horizontal');
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($largetick-before-height, $largetick-before-top, 'horizontal');
             }
           }
@@ -1105,7 +1114,13 @@ $slider-disabled-track-color: $gray-300;
       &.e-scale {
         &.e-h-scale {
           .e-tick {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($tick-before-height, $tick-before-top, 'horizontal');
+              @if ($skin-name == 'material-dark') {
+                background-position-x: center;
+              }
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($tick-before-height, $tick-before-top, 'horizontal');
             }
             @else {
@@ -1115,7 +1130,10 @@ $slider-disabled-track-color: $gray-300;
           }
           .e-large {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($largetick-after-height, $largetick-after-top, 'horizontal');
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($largetick-after-height, $largetick-after-top, 'horizontal');
             }
           }
@@ -1191,7 +1209,12 @@ $slider-disabled-track-color: $gray-300;
             }
             @if ($skin-name == 'material' or $skin-name == 'material-dark') {
               background-position: center;
-              height: 99%;
+              @if ($skin-name == 'material-dark') {
+                height: 12px;
+              }
+              @else {
+                height: 99%;
+              }
             }
           }
@@ -1217,6 +1240,10 @@ $slider-disabled-track-color: $gray-300;
             @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');
             }
+            @else if ($skin-name == 'material-dark') {
+              height: 20px;
+              top: 4px;
+            }
           }
         }
@@ -1316,7 +1343,7 @@ $slider-disabled-track-color: $gray-300;
           background-position: center center;
         }
-        @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
+        @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'material-dark') {
           &.e-large {
             @if ($skin-name != 'bootstrap4') {
               background-image: $slider-scale-tick-image-dark;
@@ -1406,7 +1433,7 @@ $slider-disabled-track-color: $gray-300;
         .e-tick {
           display: inline-block;
           @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-            background-repeat: no-repeat;
+            background-repeat: repeat-y;
           }
           @if ($skin-name != 'material' and $skin-name != 'material-dark') {

package/SCSS-Themes/inputs/slider/bootstrap5-dark.scss CHANGED Viewed

@@ -1009,7 +1009,13 @@ $slider-hover-handle-border-color: $primary-border-color-hover !default;
       &.e-scale {
         &.e-h-scale {
           .e-tick {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($tick-after-height, $tick-after-top, 'horizontal');
+              @if ($skin-name == 'material-dark') {
+                background-position: bottom;
+              }
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($tick-after-height, $tick-after-top, 'horizontal');
             }
             @else {
@@ -1019,7 +1025,10 @@ $slider-hover-handle-border-color: $primary-border-color-hover !default;
           }
           .e-large {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($largetick-before-height, $largetick-before-top, 'horizontal');
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($largetick-before-height, $largetick-before-top, 'horizontal');
             }
           }
@@ -1049,7 +1058,13 @@ $slider-hover-handle-border-color: $primary-border-color-hover !default;
       &.e-scale {
         &.e-h-scale {
           .e-tick {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($tick-before-height, $tick-before-top, 'horizontal');
+              @if ($skin-name == 'material-dark') {
+                background-position-x: center;
+              }
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($tick-before-height, $tick-before-top, 'horizontal');
             }
             @else {
@@ -1059,7 +1074,10 @@ $slider-hover-handle-border-color: $primary-border-color-hover !default;
           }
           .e-large {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($largetick-after-height, $largetick-after-top, 'horizontal');
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($largetick-after-height, $largetick-after-top, 'horizontal');
             }
           }
@@ -1135,7 +1153,12 @@ $slider-hover-handle-border-color: $primary-border-color-hover !default;
             }
             @if ($skin-name == 'material' or $skin-name == 'material-dark') {
               background-position: center;
-              height: 99%;
+              @if ($skin-name == 'material-dark') {
+                height: 12px;
+              }
+              @else {
+                height: 99%;
+              }
             }
           }
@@ -1161,6 +1184,10 @@ $slider-hover-handle-border-color: $primary-border-color-hover !default;
             @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');
             }
+            @else if ($skin-name == 'material-dark') {
+              height: 20px;
+              top: 4px;
+            }
           }
         }
@@ -1260,7 +1287,7 @@ $slider-hover-handle-border-color: $primary-border-color-hover !default;
           background-position: center center;
         }
-        @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
+        @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'material-dark') {
           &.e-large {
             @if ($skin-name != 'bootstrap4') {
               background-image: $slider-scale-tick-image-dark;
@@ -1350,7 +1377,7 @@ $slider-hover-handle-border-color: $primary-border-color-hover !default;
         .e-tick {
           display: inline-block;
           @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-            background-repeat: no-repeat;
+            background-repeat: repeat-y;
           }
           @if ($skin-name != 'material' and $skin-name != 'material-dark') {

package/SCSS-Themes/inputs/slider/bootstrap5.scss CHANGED Viewed

@@ -1009,7 +1009,13 @@ $slider-hover-handle-border-color: $primary-border-color-hover !default;
       &.e-scale {
         &.e-h-scale {
           .e-tick {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($tick-after-height, $tick-after-top, 'horizontal');
+              @if ($skin-name == 'material-dark') {
+                background-position: bottom;
+              }
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($tick-after-height, $tick-after-top, 'horizontal');
             }
             @else {
@@ -1019,7 +1025,10 @@ $slider-hover-handle-border-color: $primary-border-color-hover !default;
           }
           .e-large {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($largetick-before-height, $largetick-before-top, 'horizontal');
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($largetick-before-height, $largetick-before-top, 'horizontal');
             }
           }
@@ -1049,7 +1058,13 @@ $slider-hover-handle-border-color: $primary-border-color-hover !default;
       &.e-scale {
         &.e-h-scale {
           .e-tick {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($tick-before-height, $tick-before-top, 'horizontal');
+              @if ($skin-name == 'material-dark') {
+                background-position-x: center;
+              }
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($tick-before-height, $tick-before-top, 'horizontal');
             }
             @else {
@@ -1059,7 +1074,10 @@ $slider-hover-handle-border-color: $primary-border-color-hover !default;
           }
           .e-large {
-            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
+            @if ($skin-name != 'material' and $skin-name == 'material-dark') {
+              @include alignment($largetick-after-height, $largetick-after-top, 'horizontal');
+            }
+            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
               @include alignment($largetick-after-height, $largetick-after-top, 'horizontal');
             }
           }
@@ -1135,7 +1153,12 @@ $slider-hover-handle-border-color: $primary-border-color-hover !default;
             }
             @if ($skin-name == 'material' or $skin-name == 'material-dark') {
               background-position: center;
-              height: 99%;
+              @if ($skin-name == 'material-dark') {
+                height: 12px;
+              }
+              @else {
+                height: 99%;
+              }
             }
           }
@@ -1161,6 +1184,10 @@ $slider-hover-handle-border-color: $primary-border-color-hover !default;
             @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');
             }
+            @else if ($skin-name == 'material-dark') {
+              height: 20px;
+              top: 4px;
+            }
           }
         }
@@ -1260,7 +1287,7 @@ $slider-hover-handle-border-color: $primary-border-color-hover !default;
           background-position: center center;
         }
-        @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
+        @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'material-dark') {
           &.e-large {
             @if ($skin-name != 'bootstrap4') {
               background-image: $slider-scale-tick-image-dark;
@@ -1350,7 +1377,7 @@ $slider-hover-handle-border-color: $primary-border-color-hover !default;
         .e-tick {
           display: inline-block;
           @if ($skin-name == 'material' or $skin-name == 'material-dark') {
-            background-repeat: no-repeat;
+            background-repeat: repeat-y;
           }
           @if ($skin-name != 'material' and $skin-name != 'material-dark') {