@syncfusion/ej2-inputs 31.2.12 → 32.1.19

package/styles/slider/_bigger.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @mixin size($height, $width) {
   height: $height;
   width: $width;
@@ -26,8 +28,8 @@
     @else {
       &.e-slider-tooltip.e-tooltip-wrap.e-popup {
         .e-tip-content {
-          font-size: 11px;
-          line-height: 16px;
+          font-size: $slider-tooltip-wrap-popup-font-size;
+          line-height: $slider-tooltip-wrap-popup-line-height;
         }
       }
     }
@@ -53,7 +55,7 @@
             margin-top: $slider-touch-btn-center-align;
 
             .e-button-icon::before {
-              font-size: 17px;
+              font-size: $slider-button-icon-size;
             }
           }
         }
@@ -64,7 +66,7 @@
             margin-right: $slider-touch-btn-center-align;
 
             .e-button-icon::before {
-              font-size: 17px;
+              font-size: $slider-button-icon-size;
             }
           }
         }
@@ -77,29 +79,19 @@
 
         &.e-vertical {
           &.e-slider-btn {
-            @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
-              padding: 36px 0;
-            }
-            @else {
-              padding: 34px 0;
-            }
+            padding: $slider-vertical-btn-padding;
           }
 
           .e-first-button,
           .e-second-button {
-            @if ($skin-name == 'bootstrap5' or $skin-name == 'Material3' or $skin-name == 'bootstrap5.3') {
-              margin-right: -12px;
-            }
-            @else {
-              margin-right: -9px;
-            }
+            margin-right: $slider-vertical-button-margin-right;
           }
 
           .e-slider {
             .e-slider-track {
               @include alignment(8px, calc(50% - 4px), 'vertical');
               @if $skin-name == 'fluent2' {
-                border-radius: 8px;
+                border-radius: $slider-touch-track-border-radius;
               }
             }
 
@@ -108,7 +100,7 @@
                 margin-top: $slider-touch-center-align;
               }
               &.e-v-scale {
-                left: calc(50% - 14px);
+                left: $slider-touch-evscale-left;
               }
             }
 
@@ -143,23 +135,22 @@
         &.e-vertical {
           .e-slider-button.e-first-button,
           .e-slider-button.e-second-button {
-            border-radius: 12px;
+            border-radius: $slider-ver-hori-button-border-radius;
             @include size(24px, 24px);
             @if $skin-name == 'Material3' {
-              padding: 0;
+              padding: $slider-zero-padding-margin;
             }
 
             .e-button-icon::before {
-              font-size: 14px;
+              font-size: $slider-vertical-horizontal-button-icon-size;
             }
           }
         }
 
         &.e-horizontal {
-
           .e-slider-button.e-first-button,
           .e-slider-button.e-second-button {
-            margin-top: -12px;
+            margin-top: $slider-horizontal-slider-button-margin-top;
           }
 
           .e-tick-both {
@@ -267,11 +258,10 @@
         &.e-vertical {
           .e-slider-button.e-first-button,
           .e-slider-button.e-second-button {
-            border-radius: 12px;
+            border-radius: $slider-horizontal-button-radius;
             @include size(24px, 24px);
-
             .e-button-icon::before {
-              font-size: 22px;
+              font-size: $slider-horizontal-button-icon-size;
             }
           }
         }
@@ -280,21 +270,16 @@
 
           &.e-scale-both .e-range,
           .e-limits {
-            height: 6px;
+            height: $slider-scale-range-height;
           }
 
           .e-slider-track {
-            @if ($skin-name == 'bootstrap5.3') {
-              border-radius: 4px;
-            }
-            @else {
-              border-radius: 6px;
-            }
+            border-radius: $slider-track-border-radius;
           }
 
           .e-first-button,
           .e-second-button {
-            margin-top: -14px;
+            margin-top: $slider-first-second-button-margin-top;
           }
 
           .e-tick-both {
@@ -341,16 +326,11 @@
 
           &.e-scale-both .e-range,
           .e-range {
-            width: 6px;
+            width: $slider-range-width;
           }
 
           .e-slider-track {
-            @if ($skin-name == 'bootstrap5.3') {
-              border-radius: 4px;
-            }
-            @else {
-              border-radius: 6px;
-            }
+            border-radius: $slider-track-border-radius;
           }
 
           &.e-slider-btn {
@@ -358,7 +338,7 @@
           }
 
           .e-slider-button {
-            margin-right: -15px;
+            margin-right: $slider-button-margin-right;
           }
 
           .e-tick-both {
@@ -396,7 +376,7 @@
       &.e-horizontal {
         @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
           &.e-slider-btn {
-            padding: 0 36px;
+            padding: $slider-bgr-hor-btn-padding;
           }
         }
         @if ($skin-name == 'bootstrap4') {
@@ -426,14 +406,8 @@
           }
 
           .e-handle {
-            @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' 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);
-            }
+            margin-left: $slider-handle-mobile-margin-left;
+            top: $slider-handle-mobile-handle-top;
           }
         }
 
@@ -452,25 +426,13 @@
       &.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 == 'bootstrap5.3' or $skin-name == 'FluentUI') {
-              left: calc(50% - 8px);
-              margin-bottom: -8px;
-            }
+            left: $slider-vertical-handle-left;
+            margin-bottom: $slider-vertical-handle-margin-bottom;
           }
 
           @if ($skin-name == 'tailwind') {
             .e-range {
-              width: 6px;
+              width: $slider-range-width;
             }
           }
         }
@@ -493,7 +455,7 @@
         @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
           .e-slider-track,
           .e-range {
-            width: 6px;
+            width: $slider-range-width;
           }
         }
       }
@@ -503,7 +465,7 @@
           .e-slider {
             .e-handle {
               @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
-                margin: 0 -8px 0 0;
+                margin: $slider-rtl-handle-margin;
               }
             }
           }

package/styles/slider/_bootstrap-dark-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap-dark';
+
 //default
 $slider-bg-color: $grey-99 !default;
 $slider-disabled-bg-color: $grey-99 !default;
@@ -155,3 +158,59 @@ $slider-button-hright-bg-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEU
 $slider-button-vdown-bg-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAApVBMVEUAAAD////////////////////+/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+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7////Ss6t3AAAANnRSTlMABAwQFBgcICQoLDA0OEBESExcYGRobHR8gIOHi4+Tl5ujq7O3u7/Dx8vP09fb3+Pn6+/z9/vRpbpFAAABHklEQVR4Ae3TW1PCMBAF4LOFgsj9ooCichcFoVBy/v9P0xGndktS8uT4wPeYmZPZnZPgf7h6EMCfjMF5Ad7CFUFuKvBUj0iQjNvw0jM8BcghLpMXMglwFuCCcMl0gJsb5KrtqAM8tJCje2Q2QDOAizwxAf6aBrAqLmgPcF2GRXVLV4D7Js50YqbBMM30ockjlRiNiMpELVKYU9lWgdIblfcSErcfVBZFfAkmVKIGfrRjKiPBST+zyB2+DakcO0g091TGAgRTKrsaUsprKq9h9mQZQjm7b0/lWZA1MHQyPVi0DnSI6rCqbGi1CuEQzGgxFrgNmWXu4WYp99BAPv18dFsOhblqy4OMdFt51Cc7duGttvMYXwmXHuMrIrj6Q58aX4DtQxE2xQAAAABJRU5ErkJggg==');
 $slider-button-vup-bg-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAApVBMVEUAAAD////////////////////+/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+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7////4hhd5AAAANnRSTlMABAgMEBgcICQoLDA0OEBESExUXGBkbHR8gIOHi5Obn6Onq6+zt7u/x8vP09fb3+Pn6+/z9/tWLLgwAAABGElEQVR4Ae3UyXLyMBAE4NYvzPJDDARCyMKShbBAgo1wv/+jhSRVqhojqeRDqnLgu/nQh3GPBhd/mZ7PNSpobMhNA9HSjCd5F5FGBb8Vt4ihprRiBklWtGIG6WQU9i0EDY8sMX34qQkdxvBJlnR61nBqf9Bj24TDwNDr0EOZeqRg7PTuDmtvFHat8v+VHf5/p7ColRuUHV4bCg8KJ2pGIU/xQ91TMAO5hVYxwhf9SmHfhtXNKcz+Aa0dhWVSeknCug5DYaIg6CcKGcTncYgzYzkIRLwDh97BF1glcGpu3YGpgod+cQSKGwTcnQWyKwT1jQys6wizfcE2GGY3AnZHwuzOgcxShImtRuTRte8G1c56bYGKFC5+wyfN5oD6Q24erwAAAABJRU5ErkJggg==');
 $slider-scale-tick-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNYtmzZfwAG2gLyNpL4dgAAAABJRU5ErkJggg==');
+
+$slider-vertical-btn-padding: 34px 0 !default;
+$slider-vertical-button-margin-right: -9px !default;
+$slider-track-normal-border-radius: 4px !default;
+$slider-vertical-range-padding: 38px 0 !default;
+
+$slider-tooltip-wrap-popup-font-size: 11px !default;
+$slider-tooltip-wrap-popup-line-height: 16px !default;
+$slider-button-icon-size: 17px !default;
+$slider-ver-hori-button-border-radius: 12px !default;
+$slider-vertical-horizontal-button-icon-size: 14px !default;
+$slider-horizontal-slider-button-margin-top: -12px !default;
+$slider-horizontal-button-radius: 12px !default;
+$slider-horizontal-button-icon-size: 22px !default;
+$slider-track-border-radius: 6px !default;
+$slider-first-second-button-margin-top: -14px !default;
+$slider-button-margin-right: -15px !default;
+$slider-after-radius: 50% !default;
+$slider-button-icon-before-icon-size: 18px !default;
+$slider-first-second-button-font-weight: 600 !default;
+$slider-zero-padding-margin: 0 !default;
+$slider-scale-range-height: 6px !default;
+$slider-range-width: 6px !default;
+$slider-track-width: 4px !default;
+$slider-handle-mobile-margin-left: -9px !default;
+$slider-handle-mobile-handle-top: calc(50% - 9px) !default;
+$slider-vertical-handle-left: calc(50% - 9px);
+$slider-vertical-handle-margin-bottom: -9px !default;
+$slider-handle-margin-left: -8px !default;
+$slider-handle-slide-top: calc(50% - 8px);
+$slider-range-top: calc(50% - 4px);
+$slider-button-icon-font-size: 17px !default;
+$slider-slider-top: calc(50% - 16px);
+$slider-track-top: calc(50% - 4px);
+$slider-vertical-slider-left: calc(50% - 16px);
+$scale-before-v-scale-right: 9px !default;
+$slider-tick-before-top: -18px !default;
+$slider-tick-before-bottom: -20px !default;
+$slider-tip-content-padding: 0 8px !default;
+$slider-tip-content-top: calc(50% - 10px);
+$slider-tip-content-left: calc(50% - 36px);
+$slider-zero-radius: 0% !default;
+$slider-half-radius: 50% !default;
+$slider-active-tooltip-content-top: calc(50% - 10px);
+$slider-active-tooltip-content-left: calc(50% - 16px);
+$slider-nrml-handle-left: calc(50% - 8px);
+$slider-ev-scale-left: calc(50% - 14px);
+$slider-full-height: 100% !default;
+$slider-ev-scale-margin-top: -2px !default;
+$slider-scale-both-top: 15px !default;
+$slider-tick-value-before-right: 17px !default;
+$slider-tick-value-before-left: 19px !default;
+$slider-tooltip-wrap-border-radius: 8px !default;
+$slider-zero-border: 0 !default;
+$slider-nrml-track-top: calc(50% - 2px);
+$slider-full-radius: 50% !default;

package/styles/slider/_bootstrap-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/bootstrap' as *;
+@forward 'ej2-base/styles/definition/bootstrap';
 $slider-bg-color: $grey-white !default;
 $slider-disabled-bg-color: $grey-white !default;
 $slider-active-bg-color: $grey-white !default;
@@ -151,3 +153,59 @@ $slider-limit-bar-left: calc(50% - 4px) !default;
 $slider-limit-bar-color: rgba($grey-base, .25) !default;
 $slider-tick-font-color: $grey-light-font !default;
 $slider-tab-active-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6) !default;
+
+$slider-vertical-btn-padding: 34px 0 !default;
+$slider-vertical-button-margin-right: -9px !default;
+$slider-track-normal-border-radius: 4px !default;
+$slider-vertical-range-padding: 38px 0 !default;
+
+$slider-tooltip-wrap-popup-font-size: 11px !default;
+$slider-tooltip-wrap-popup-line-height: 16px !default;
+$slider-button-icon-size: 17px !default;
+$slider-ver-hori-button-border-radius: 12px !default;
+$slider-vertical-horizontal-button-icon-size: 14px !default;
+$slider-horizontal-slider-button-margin-top: -12px !default;
+$slider-horizontal-button-radius: 12px !default;
+$slider-horizontal-button-icon-size: 22px !default;
+$slider-track-border-radius: 6px !default;
+$slider-first-second-button-margin-top: -14px !default;
+$slider-button-margin-right: -15px !default;
+$slider-after-radius: 50% !default;
+$slider-button-icon-before-icon-size: 18px !default;
+$slider-first-second-button-font-weight: 600 !default;
+$slider-zero-padding-margin: 0 !default;
+$slider-scale-range-height: 6px !default;
+$slider-range-width: 6px !default;
+$slider-track-width: 4px !default;
+$slider-handle-mobile-margin-left: -9px !default;
+$slider-handle-mobile-handle-top: calc(50% - 9px) !default;
+$slider-vertical-handle-left: calc(50% - 9px);
+$slider-vertical-handle-margin-bottom: -9px !default;
+$slider-handle-margin-left: -8px !default;
+$slider-handle-slide-top: calc(50% - 8px);
+$slider-range-top: calc(50% - 4px);
+$slider-button-icon-font-size: 17px !default;
+$slider-slider-top: calc(50% - 16px);
+$slider-track-top: calc(50% - 4px);
+$slider-vertical-slider-left: calc(50% - 16px);
+$scale-before-v-scale-right: 9px !default;
+$slider-tick-before-top: -18px !default;
+$slider-tick-before-bottom: -20px !default;
+$slider-tip-content-padding: 0 8px !default;
+$slider-tip-content-top: calc(50% - 10px);
+$slider-tip-content-left: calc(50% - 36px);
+$slider-zero-radius: 0% !default;
+$slider-half-radius: 50% !default;
+$slider-active-tooltip-content-top: calc(50% - 10px);
+$slider-active-tooltip-content-left: calc(50% - 16px);
+$slider-nrml-handle-left: calc(50% - 8px);
+$slider-ev-scale-left: calc(50% - 14px);
+$slider-full-height: 100% !default;
+$slider-ev-scale-margin-top: -2px !default;
+$slider-scale-both-top: 15px !default;
+$slider-tick-value-before-right: 17px !default;
+$slider-tick-value-before-left: 19px !default;
+$slider-tooltip-wrap-border-radius: 8px !default;
+$slider-zero-border: 0 !default;
+$slider-nrml-track-top: calc(50% - 2px);
+$slider-full-radius: 50% !default;

package/styles/slider/_bootstrap4-definition.scss

@@ -1,4 +1,6 @@
 @use 'sass:color';
+@use 'ej2-base/styles/definition/bootstrap4' as *;
+@forward 'ej2-base/styles/definition/bootstrap4';
 
 $slider-bg-color: $gray-800 !default;
 $slider-disabled-bg-color: $gray-500 !default;
@@ -147,3 +149,57 @@ $slider-tick-font-color: $gray-900 !default;
 $slider-disabled-range-color: $gray-500;
 $slider-disabled-handle-color: $gray-500;
 $slider-disabled-track-color: $gray-300;
+
+$slider-vertical-btn-padding: 34px 0 !default;
+$slider-vertical-button-margin-right: -9px !default;
+$slider-track-normal-border-radius: 6px !default;
+$slider-vertical-range-padding: 30px 0 !default;
+
+$slider-tooltip-wrap-popup-font-size: 11px !default;
+$slider-tooltip-wrap-popup-line-height: 16px !default;
+$slider-button-icon-size: 17px !default;
+$slider-ver-hori-button-border-radius: 12px !default;
+$slider-vertical-horizontal-button-icon-size: 14px !default;
+$slider-horizontal-slider-button-margin-top: -12px !default;
+$slider-horizontal-button-radius: 12px !default;
+$slider-horizontal-button-icon-size: 22px !default;
+$slider-track-border-radius: 6px !default;
+$slider-first-second-button-margin-top: -14px !default;
+$slider-button-margin-right: -15px !default;
+$slider-after-radius: 50% !default;
+$slider-button-icon-before-icon-size: 18px !default;
+$slider-first-second-button-font-weight: 600 !default;
+$slider-zero-padding-margin: 0 !default;
+$slider-scale-range-height: 6px !default;
+$slider-range-width: 6px !default;
+$slider-track-width: 4px !default;
+$slider-vertical-handle-left: calc(50% - 8px);
+$slider-vertical-handle-margin-bottom: -8px !default;
+$slider-handle-margin-left: -7px !default;
+$slider-handle-slide-top: calc(50% - 7px);
+$slider-button-icon-font-size: 17px !default;
+$slider-slider-top: calc(50% - 16px);
+$slider-track-top: calc(50% - 4px);
+$slider-vertical-slider-left: calc(50% - 16px);
+$scale-before-v-scale-right: 9px !default;
+$slider-tick-before-top: -18px !default;
+$slider-tick-before-bottom: -20px !default;
+$slider-tip-content-padding: 0 8px !default;
+$slider-tip-content-top: calc(50% - 10px);
+$slider-tip-content-left: calc(50% - 36px);
+$slider-zero-radius: 0% !default;
+$slider-half-radius: 50% !default;
+$slider-active-tooltip-content-top: calc(50% - 10px);
+$slider-active-tooltip-content-left: calc(50% - 16px);
+$slider-nrml-handle-left: calc(50% - 7px);
+$slider-tick-value-line-height: 1.5;
+$slider-ev-scale-left: calc(50% - 14px);
+$slider-full-height: 100% !default;
+$slider-ev-scale-margin-top: -2px !default;
+$slider-scale-both-top: 15px !default;
+$slider-tick-value-before-right: 17px !default;
+$slider-tick-value-before-left: 19px !default;
+$slider-tooltip-wrap-border-radius: 8px !default;
+$slider-zero-border: 0 !default;
+$slider-nrml-track-top: calc(50% - 3px);
+$slider-full-radius: 50% !default;

package/styles/slider/_bootstrap5-dark-definition.scss

@@ -1 +1,150 @@
-@import './bootstrap5-definition.scss';
+@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap5-dark';
+
+// layout variables
+$slider-height: 4px !default;
+$slider-handle-height: 12px !default;
+$slider-handle-width: 12px !default;
+$slider-handle-border-radius: 50% !default;
+$slider-handle-top: -7px !default;
+$slider-h-handle-margin: 0 !default;
+$rtl-slider-h-handle-margin: 0 -6px 0 0 !default;
+$slider-v-handle-margin: -6px !default;
+$rtl-slider-v-handle-margin: 0 !default;
+$slider-container-height: 6px !default;
+$slider-handle-box-shadow: $shadow !default;
+$slider-tooltip-padding: 2px 4px !default;
+$tick-after-height: 6px !default;
+$tick-after-top: -10px !default;
+$largetick-before-top: -10px !default;
+$largetick-before-height: 10px !default;
+$largetick-after-height: 10px !default;
+$largetick-after-top: 5px !default;
+$tick-before-height: 6px !default;
+$tick-before-top: 1px !default;
+$slider-vertical-width: 4px !default;
+$slider-border-radius-handle: 10px !default;
+$slider-scale-font-family: $font-family !default;
+$slider-scale-font-size: $text-xs !default;
+$slider-scale-tick-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAQSURBVHgBAQUA+v8AztTa/whsA3yqMpmsAAAAAElFTkSuQmCC');
+$slider-scale-tick-image-dark: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAQSURBVHgBAQUA+v8AbHV9/wUNAl7Qm4m+AAAAAElFTkSuQmCC');
+$slider-disabled-handle-show: none !default;
+$slider-button-size: 20px !default;
+$slider-button-shadow: $shadow-sm !default;
+$slider-button-horizon-padding: 0 28px !default;
+$slider-button-vertical-padding: 28px 0 !default;
+$tick-after-left: 5px !default;
+$largetick-before-left: 1px !default;
+$tick-before-left: 17px !default;
+$largetick-after-left: 17px !default;
+$slider-wrap-height: 26px !default;
+$slider-center-align: -5px !default;
+$slider-btn-center-align: -10px !default;
+$slider-range-height: $slider-container-height !default;
+$slider-range-width: $slider-vertical-width !default;
+$slider-range-border-radius: 4px !default;
+$slider-cursor: pointer !default;
+$slider-handle-hover-cursor: pointer !default;
+$slider-scale-top: 16px !default;
+$slider-tab-border: 1px solid $content-bg-color !default;
+$slider-tab-active-box-shadow: $shadow-focus-ring2 !default;
+$slider-limit-bar-horizontal-height: 6px !default;
+$slider-limit-bar-top: calc(50% - 3px) !default;
+$slider-limit-bar-vertical-width: 6px !default;
+$slider-limit-bar-left: calc(50% - 3px) !default;
+$slider-handle-mobile-height: 16px !default;
+$slider-handle-mobile-width: 16px !default;
+$slider-handle-mobile-margin-left: -8px !default;
+$slider-handle-mobile-handle-top: calc(50% - 8px) !default;
+$slider-handle-mobile-top: -7px !default;
+$slider-h-handle-mobile-margin: 0 !default;
+$rtl-slider-h-handle-mobile-margin: 0 !default;
+$slider-v-handle-mobile-margin: 0 !default;
+$rtl-slider-v-handle-mobile-margin: 0 !default;
+$slider-mobile-scale-font-size: $text-sm !default;
+$tick-after-mobile-height: 8px !default;
+$tick-after-mobile-left: 18px !default;
+$tick-before-mobile-left: 2px !default;
+$largetick-before-mobile-height: 12px !default;
+$largetick-before-mobile-left: -2px !default;
+$tick-before-mobile-top: -12px !default;
+$largetick-after-mobile-top: 8px !default;
+$tick-after-mobile-top: 4px !default;
+
+//color variables
+$slider-button-icon-color: $secondary-text-color !default;
+$slider-range-bar-color: $primary !default;
+$slider-range-bar-hover-color: $primary-bg-color-hover !default;
+$slider-track-color: $content-bg-color-alt2 !default;
+$slider-button-bg-color: $secondary-bg-color !default;
+$slider-button-icon-bg-color: $secondary-text-color !default;
+$slider-normal-handle-border-color: $primary !default;
+$slider-handle-bg-color: $primary !default;
+$slider-hover-color: $content-bg-color-alt2 !default;
+$slider-handle-hover-border-color: $slider-normal-handle-border-color !default;
+$slider-handle-start-border-color: $content-bg-color-alt2 !default;
+$slider-button-border-color: $secondary-border-color !default;
+$slider-tab-background: $primary-bg-color-hover !default;
+$slider-tab-range-color: $primary !default;
+$slider-tab-track-color: $content-bg-color-alt2 !default;
+$slider-limit-bar-color: $overlay-bg-color !default;
+$slider-tick-font-color: $content-text-color-alt1 !default;
+$slider-hover-handle-color: $primary-bg-color-hover !default;
+$slider-hover-handle-border-color: $primary-border-color-hover !default;
+$slider-vertical-btn-padding: 36px 0 !default;
+$slider-vertical-button-margin-right: -12px !default;
+$slider-track-border-radius: 4px !default;
+$slider-track-normal-border-radius: 4px !default;
+$slider-vertical-range-padding: 28px 0 !default;
+$slider-tooltip-wrap-popup-font-size: 11px !default;
+$slider-tooltip-wrap-popup-line-height: 16px !default;
+$slider-button-icon-size: 17px !default;
+$slider-ver-hori-button-border-radius: 12px !default;
+$slider-vertical-horizontal-button-icon-size: 14px !default;
+$slider-horizontal-slider-button-margin-top: -12px !default;
+$slider-horizontal-button-radius: 12px !default;
+$slider-horizontal-button-icon-size: 22px !default;
+$slider-track-border-radius: 6px !default;
+$slider-first-second-button-margin-top: -14px !default;
+$slider-button-margin-right: -15px !default;
+$slider-after-radius: 50% !default;
+$slider-button-icon-before-icon-size: 18px !default;
+$slider-first-second-button-font-weight: 600 !default;
+$slider-zero-padding-margin: 0 !default;
+$slider-scale-range-height: 6px !default;
+$slider-range-width: 6px !default;
+$slider-track-width: 4px !default;
+$slider-vertical-handle-left: calc(50% - 8px);
+$slider-vertical-handle-margin-bottom: -8px !default;
+$slider-handle-margin-left: -6px !default;
+$slider-handle-slide-top: calc(50% - 6px);
+$slider-button-icon-font-size: 17px !default;
+$slider-slider-top: calc(50% - 16px);
+$slider-track-top: calc(50% - 4px);
+$slider-vertical-slider-left: calc(50% - 16px);
+$scale-before-v-scale-right: 9px !default;
+$slider-tick-before-top: -18px !default;
+$slider-tick-before-bottom: -20px !default;
+$slider-tip-content-padding: 0 8px !default;
+$slider-tip-content-top: calc(50% - 10px);
+$slider-tip-content-left: calc(50% - 36px);
+$slider-zero-radius: 0% !default;
+$slider-half-radius: 50% !default;
+$slider-active-tooltip-content-top: calc(50% - 10px);
+$slider-active-tooltip-content-left: calc(50% - 16px);
+$slider-nrml-handle-left: calc(50% - 6px);
+$slider-tick-value-line-height: 1.5;
+$slider-limit-border-radius: 4px !default;
+$slider-ev-scale-left: calc(50% - 14px);
+$slider-full-height: 100% !default;
+$slider-ev-scale-margin-top: -2px !default;
+$slider-scale-both-top: 15px !default;
+$slider-tick-value-before-right: 17px !default;
+$slider-tick-value-before-left: 19px !default;
+$slider-tooltip-wrap-border-radius: 8px !default;
+$slider-zero-border: 0 !default;
+$slider-nrml-track-top: calc(50% - 3px);
+$slider-bgr-hor-btn-padding: 0 36px !default;
+$slider-rtl-handle-margin: 0 -8px 0 0 !default;
+$slider-button-margin-top: -13px !default;
+$slider-slide-button-radius: 10px !default;

package/styles/slider/_bootstrap5-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/bootstrap5' as *;
+@forward 'ej2-base/styles/definition/bootstrap5';
+
 // layout variables
 $slider-height: 4px !default;
 $slider-handle-height: 12px !default;
@@ -49,7 +52,6 @@ $slider-limit-bar-horizontal-height: 6px !default;
 $slider-limit-bar-top: calc(50% - 3px) !default;
 $slider-limit-bar-vertical-width: 6px !default;
 $slider-limit-bar-left: calc(50% - 3px) !default;
-
 $slider-handle-mobile-height: 16px !default;
 $slider-handle-mobile-width: 16px !default;
 $slider-handle-mobile-margin-left: -8px !default;
@@ -89,3 +91,60 @@ $slider-limit-bar-color: $overlay-bg-color !default;
 $slider-tick-font-color: $content-text-color-alt1 !default;
 $slider-hover-handle-color: $primary-bg-color-hover !default;
 $slider-hover-handle-border-color: $primary-border-color-hover !default;
+$slider-vertical-btn-padding: 36px 0 !default;
+$slider-vertical-button-margin-right: -12px !default;
+$slider-track-border-radius: 4px !default;
+$slider-track-normal-border-radius: 4px !default;
+$slider-vertical-range-padding: 28px 0 !default;
+$slider-tooltip-wrap-popup-font-size: 11px !default;
+$slider-tooltip-wrap-popup-line-height: 16px !default;
+$slider-button-icon-size: 17px !default;
+$slider-ver-hori-button-border-radius: 12px !default;
+$slider-vertical-horizontal-button-icon-size: 14px !default;
+$slider-horizontal-slider-button-margin-top: -12px !default;
+$slider-horizontal-button-radius: 12px !default;
+$slider-horizontal-button-icon-size: 22px !default;
+$slider-track-border-radius: 6px !default;
+$slider-first-second-button-margin-top: -14px !default;
+$slider-button-margin-right: -15px !default;
+$slider-after-radius: 50% !default;
+$slider-button-icon-before-icon-size: 18px !default;
+$slider-first-second-button-font-weight: 600 !default;
+$slider-zero-padding-margin: 0 !default;
+$slider-scale-range-height: 6px !default;
+$slider-range-width: 6px !default;
+$slider-track-width: 4px !default;
+$slider-vertical-handle-left: calc(50% - 8px);
+$slider-vertical-handle-margin-bottom: -8px !default;
+$slider-handle-margin-left: -6px !default;
+$slider-handle-slide-top: calc(50% - 6px);
+$slider-button-icon-font-size: 17px !default;
+$slider-slider-top: calc(50% - 16px);
+$slider-track-top: calc(50% - 4px);
+$slider-vertical-slider-left: calc(50% - 16px);
+$scale-before-v-scale-right: 9px !default;
+$slider-tick-before-top: -18px !default;
+$slider-tick-before-bottom: -20px !default;
+$slider-tip-content-padding: 0 8px !default;
+$slider-tip-content-top: calc(50% - 10px);
+$slider-tip-content-left: calc(50% - 36px);
+$slider-zero-radius: 0% !default;
+$slider-half-radius: 50% !default;
+$slider-active-tooltip-content-top: calc(50% - 10px);
+$slider-active-tooltip-content-left: calc(50% - 16px);
+$slider-nrml-handle-left: calc(50% - 6px);
+$slider-tick-value-line-height: 1.5;
+$slider-limit-border-radius: 4px !default;
+$slider-ev-scale-left: calc(50% - 14px);
+$slider-full-height: 100% !default;
+$slider-ev-scale-margin-top: -2px !default;
+$slider-scale-both-top: 15px !default;
+$slider-tick-value-before-right: 17px !default;
+$slider-tick-value-before-left: 19px !default;
+$slider-tooltip-wrap-border-radius: 8px !default;
+$slider-zero-border: 0 !default;
+$slider-nrml-track-top: calc(50% - 3px);
+$slider-bgr-hor-btn-padding: 0 36px !default;
+$slider-rtl-handle-margin: 0 -8px 0 0 !default;
+$slider-button-margin-top: -13px !default;
+$slider-slide-button-radius: 10px !default;