@syncfusion/ej2-inputs 31.2.15 → 32.1.20

package/styles/slider/_tailwind3-definition.scss

@@ -1,8 +1,11 @@
+@use 'ej2-base/styles/definition/tailwind3' as *;
+@forward 'ej2-base/styles/definition/tailwind3';
+
 // layout variables
 $slider-height: 4px !default;
 $slider-handle-height: 12px !default;
 $slider-handle-width: 12px !default;
-$slider-handle-border-radius: 50% !default;
+$slider-handle-border-radius: $radius-full !default;
 $slider-handle-top: -7px !default;
 $slider-h-handle-margin: 0 !default;
 $rtl-slider-h-handle-margin: 0 -6px 0 0 !default;
@@ -20,7 +23,7 @@ $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-border-radius-handle: $radius-10 !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');
@@ -39,14 +42,14 @@ $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-range-border-radius: $radius-4 !default;
 $slider-cursor: pointer !default;
 $slider-handle-hover-cursor: pointer !default;
-$slider-scale-top: 16px !default;
+$slider-scale-top: 18px !default;
 $slider-tab-border: 1px solid $content-bg-color !default;
 $slider-tab-active-box-shadow: $shadow-focus-ring1 !default;
 $slider-limit-bar-horizontal-height: 4px !default;
-$slider-limit-bar-top: calc(50% - 4px) !default;
+$slider-limit-bar-top: calc(50% - 2px) !default;
 $slider-limit-bar-vertical-width: 4px !default;
 $slider-limit-bar-left: calc(50% - 4px) !default;
 
@@ -90,3 +93,58 @@ $slider-limit-bar-color: $content-bg-color-alt5 !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: 34px 0 !default;
+$slider-vertical-button-margin-right: -9px !default;
+$slider-track-normal-border-radius: $radius-4 !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: $radius-12 !default;
+$slider-vertical-horizontal-button-icon-size: 14px !default;
+$slider-horizontal-slider-button-margin-top: -12px !default;
+$slider-horizontal-button-radius: $radius-12 !default;
+$slider-horizontal-button-icon-size: 22px !default;
+$slider-track-border-radius: $radius-6 !default;
+$slider-first-second-button-margin-top: -14px !default;
+$slider-button-margin-right: -15px !default;
+$slider-after-radius: $radius-full !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% - 9px);
+$slider-vertical-handle-margin-bottom: -9px !default;
+$slider-handle-margin-left: -8px !default;
+$slider-handle-slide-top: calc(50% - 6px);
+$slider-range-top: calc(50% - 2px);
+$slider-vertical-slider-left: calc(50% - 16px);
+$slider-button-icon-font-size: 17px !default;
+$slider-slider-top: calc(50% - 16px);
+$slider-track-top: calc(50% - 2px);
+$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: $radius-0 !default;
+$slider-half-radius: $radius-full !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: $radius-8 !default;
+$slider-zero-border: 0 !default;
+$slider-nrml-track-top: calc(50% - 2px);
+$slider-full-radius: $radius-full !default;

package/styles/slider/_theme-variables.scss

@@ -0,0 +1 @@
+@forward './_tailwind3-definition';

package/styles/slider/_theme.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @mixin button-size($size) {
   height: $size;
   width: $size;
@@ -36,11 +38,11 @@
         @include button-size(18px);
       }
       @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
-        border-radius: 10px;
+        border-radius: $slider-slide-button-radius;
         box-shadow: $slider-button-shadow;
       }
       @else {
-        border-radius: 50%;
+        border-radius: $slider-full-radius;
       }
       @if ($skin-name == 'Material3') {
         padding: 4px;

package/styles/slider/bds.css

@@ -146,7 +146,7 @@
 }
 .e-control-wrapper.e-slider-container.e-horizontal .e-handle {
   margin-left: -6px;
-  top: calc(50% - 8px);
+  top: calc(50% - 6px);
 }
 .e-control-wrapper.e-slider-container.e-horizontal.e-scale-both .e-range {
   height: 4px;
@@ -165,7 +165,7 @@
 .e-control-wrapper.e-slider-container.e-vertical {
   height: inherit;
   width: 48px;
-  padding: 28px 0;
+  padding: 38px 0;
 }
 .e-control-wrapper.e-slider-container.e-vertical .e-slider {
   height: 100%;
@@ -179,7 +179,7 @@
   height: 100%;
   position: absolute;
   overflow: hidden;
-  left: 50%;
+  left: calc(50% - 2px);
   width: 4px;
   border-radius: 4px;
 }
@@ -216,7 +216,7 @@
 }
 .e-control-wrapper.e-slider-container.e-vertical .e-slider .e-handle {
   margin-bottom: -8px;
-  left: calc(50% - 4px);
+  left: calc(50% - 8px);
 }
 .e-control-wrapper.e-slider-container.e-vertical .e-slider .e-range {
   width: 4px;
@@ -338,7 +338,7 @@
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale {
   height: 100%;
   width: 28px;
-  left: calc(50% - 12px);
+  left: calc(50% - 14px);
   top: 0;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-v-scale .e-tick {
@@ -353,10 +353,10 @@
   margin-top: 3px;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-h-scale.e-tick-after {
-  top: 3px;
+  top: 8px;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-h-scale.e-tick-before {
-  top: 15px;
+  top: 20px;
 }
 .e-control-wrapper.e-slider-container .e-scale.e-h-scale .e-tick {
   display: inline-block;
@@ -548,7 +548,7 @@
 .e-bigger .e-control-wrapper.e-slider-container.e-vertical .e-range,
 .e-control-wrapper.e-slider-container.e-bigger.e-vertical.e-scale-both .e-range,
 .e-control-wrapper.e-slider-container.e-bigger.e-vertical .e-range {
-  width: 6px;
+  width: 4px;
 }
 .e-bigger .e-control-wrapper.e-slider-container.e-vertical .e-slider-track,
 .e-control-wrapper.e-slider-container.e-bigger.e-vertical .e-slider-track {
@@ -597,18 +597,18 @@
 }
 .e-bigger .e-control-wrapper.e-slider-container.e-vertical .e-slider .e-handle,
 .e-control-wrapper.e-slider-container.e-bigger.e-vertical .e-slider .e-handle {
-  left: calc(50% - 5px);
+  left: calc(50% - 9px);
   margin-bottom: -9px;
 }
 .e-bigger .e-control-wrapper.e-slider-container.e-vertical .e-slider .e-range,
 .e-control-wrapper.e-slider-container.e-bigger.e-vertical .e-slider .e-range {
-  width: 6px;
+  width: 4px;
 }
 .e-bigger .e-control-wrapper.e-slider-container.e-vertical .e-slider-track,
 .e-bigger .e-control-wrapper.e-slider-container.e-vertical .e-range,
 .e-control-wrapper.e-slider-container.e-bigger.e-vertical .e-slider-track,
 .e-control-wrapper.e-slider-container.e-bigger.e-vertical .e-range {
-  width: 6px;
+  width: 4px;
 }
 .e-bigger .e-control-wrapper.e-slider-container.e-rtl.e-horizontal .e-slider .e-handle,
 .e-control-wrapper.e-slider-container.e-bigger.e-rtl.e-horizontal .e-slider .e-handle {

package/styles/slider/bds.scss

@@ -1,6 +1,6 @@
-@import 'ej2-base/styles/definition/bds.scss';
-@import 'ej2-popups/styles/popup/bds-definition.scss';
-@import 'ej2-popups/styles/tooltip/bds-definition.scss';
-@import 'bds-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bds' as *;
+@use 'ej2-popups/styles/popup/bds-definition' as *;
+@use 'ej2-popups/styles/tooltip/bds-definition' as *;
+@use 'bds-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/slider/bootstrap-dark.css

@@ -188,7 +188,6 @@
   border-radius: 3px;
   width: 10px;
   left: calc(50% - 5px);
-  border-radius: 4px;
 }
 .e-control-wrapper.e-slider-container.e-vertical.e-small-size.e-slider-btn {
   height: 100%;

package/styles/slider/bootstrap-dark.scss

@@ -1,6 +1,6 @@
-@import 'ej2-base/styles/definition/bootstrap-dark.scss';
-@import 'ej2-popups/styles/popup/bootstrap-dark-definition.scss';
-@import 'ej2-popups/styles/tooltip/bootstrap-dark-definition.scss';
-@import 'bootstrap-dark-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@use 'ej2-popups/styles/popup/bootstrap-dark-definition' as *;
+@use 'ej2-popups/styles/tooltip/bootstrap-dark-definition' as *;
+@use 'bootstrap-dark-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/slider/bootstrap.css

@@ -188,7 +188,6 @@
   border-radius: 3px;
   width: 10px;
   left: calc(50% - 5px);
-  border-radius: 4px;
 }
 .e-control-wrapper.e-slider-container.e-vertical.e-small-size.e-slider-btn {
   height: 100%;

package/styles/slider/bootstrap.scss

@@ -1,6 +1,6 @@
-@import 'ej2-base/styles/definition/bootstrap.scss';
-@import 'ej2-popups/styles/popup/bootstrap-definition.scss';
-@import 'ej2-popups/styles/tooltip/bootstrap-definition.scss';
-@import 'bootstrap-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap' as *;
+@use 'ej2-popups/styles/popup/bootstrap-definition' as *;
+@use 'ej2-popups/styles/tooltip/bootstrap-definition' as *;
+@use 'bootstrap-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/slider/bootstrap4.css

@@ -184,7 +184,7 @@
 }
 .e-control-wrapper.e-slider-container.e-horizontal .e-range {
   height: 6px;
-  top: calc(50% - 2px);
+  top: calc(50% - 3px);
   top: calc(50% - 3px);
 }
 .e-control-wrapper.e-slider-container.e-horizontal .e-limits {
@@ -212,7 +212,7 @@
   overflow: hidden;
   width: 6px;
   left: calc(50% - 3px);
-  border-radius: 4px;
+  border-radius: 6px;
 }
 .e-control-wrapper.e-slider-container.e-vertical.e-small-size.e-slider-btn {
   height: 100%;
@@ -546,8 +546,6 @@
 }
 .e-bigger .e-control-wrapper.e-slider-container.e-vertical .e-slider .e-handle,
 .e-control-wrapper.e-slider-container.e-bigger.e-vertical .e-slider .e-handle {
-  left: calc(50% - 9px);
-  margin-bottom: -9px;
   left: calc(50% - 8px);
   margin-bottom: -8px;
 }

package/styles/slider/bootstrap4.scss

@@ -1,6 +1,6 @@
-@import 'ej2-base/styles/definition/bootstrap4.scss';
-@import 'ej2-popups/styles/popup/bootstrap4-definition.scss';
-@import 'ej2-popups/styles/tooltip/bootstrap4-definition.scss';
-@import 'bootstrap4-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap4' as *;
+@use 'ej2-popups/styles/popup/bootstrap4-definition' as *;
+@use 'ej2-popups/styles/tooltip/bootstrap4-definition' as *;
+@use 'bootstrap4-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/slider/bootstrap5-dark.css

@@ -154,7 +154,7 @@
 }
 .e-control-wrapper.e-slider-container.e-horizontal .e-range {
   height: 6px;
-  top: calc(50% - 2px);
+  top: calc(50% - 3px);
   top: calc(50% - 3px);
 }
 .e-control-wrapper.e-slider-container.e-horizontal .e-limits {
@@ -621,8 +621,6 @@
 }
 .e-bigger .e-control-wrapper.e-slider-container.e-vertical .e-slider .e-handle,
 .e-control-wrapper.e-slider-container.e-bigger.e-vertical .e-slider .e-handle {
-  left: calc(50% - 9px);
-  margin-bottom: -9px;
   left: calc(50% - 8px);
   margin-bottom: -8px;
 }
@@ -630,7 +628,7 @@
 .e-bigger .e-control-wrapper.e-slider-container.e-vertical .e-range,
 .e-control-wrapper.e-slider-container.e-bigger.e-vertical .e-slider-track,
 .e-control-wrapper.e-slider-container.e-bigger.e-vertical .e-range {
-  width: 6px;
+  width: 4px;
 }
 .e-bigger .e-control-wrapper.e-slider-container.e-rtl.e-horizontal .e-slider .e-handle,
 .e-control-wrapper.e-slider-container.e-bigger.e-rtl.e-horizontal .e-slider .e-handle {

package/styles/slider/bootstrap5-dark.scss

@@ -1,6 +1,6 @@
-@import 'ej2-base/styles/definition/bootstrap5-dark.scss';
-@import 'ej2-popups/styles/popup/bootstrap5-dark-definition.scss';
-@import 'ej2-popups/styles/tooltip/bootstrap5-dark-definition.scss';
-@import 'bootstrap5-dark-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
+@use 'ej2-popups/styles/popup/bootstrap5-dark-definition' as *;
+@use 'ej2-popups/styles/tooltip/bootstrap5-dark-definition' as *;
+@use 'bootstrap5-dark-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/slider/bootstrap5.3.css

@@ -2,6 +2,86 @@
 
 
 
+
+
+
+
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
 /* stylelint-disable-line no-empty-source */
 /* stylelint-disable-line no-empty-source */
 /* stylelint-disable property-no-vendor-prefix */
@@ -42,7 +122,7 @@
   position: relative;
 }
 .e-control-wrapper.e-slider-container .e-slider .e-handle {
-  border-radius: 10px;
+  border-radius: calc(var(--e-radius) * 0.625);
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   cursor: pointer;
@@ -145,7 +225,7 @@
   position: absolute;
   overflow: hidden;
   background: var(--color-sf-content-bg-color-alt2);
-  border-radius: 6px;
+  border-radius: calc(var(--e-radius) * 0.375);
   top: calc(50% - 4px);
   top: calc(50% - 3px);
 }
@@ -158,7 +238,7 @@
 }
 .e-control-wrapper.e-slider-container.e-horizontal .e-range {
   height: 6px;
-  top: calc(50% - 2px);
+  top: calc(50% - 3px);
   top: calc(50% - 3px);
 }
 .e-control-wrapper.e-slider-container.e-horizontal .e-limits {
@@ -166,7 +246,7 @@
   position: absolute;
   height: 6px;
   top: calc(50% - 3px);
-  border-radius: 6px;
+  border-radius: calc(var(--e-radius) * 0.375);
 }
 .e-control-wrapper.e-slider-container.e-vertical {
   height: inherit;
@@ -187,7 +267,7 @@
   overflow: hidden;
   width: 6px;
   left: calc(50% - 3px);
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.375);
 }
 .e-control-wrapper.e-slider-container.e-vertical.e-small-size.e-slider-btn {
   height: 100%;
@@ -255,10 +335,10 @@
   position: absolute;
   width: 6px;
   left: calc(50% - 3px);
-  border-radius: 6px;
+  border-radius: calc(var(--e-radius) * 0.375);
 }
 .e-control-wrapper.e-slider-container .e-range {
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   position: absolute;
   -webkit-transition: left 300ms ease-out, right 300ms ease-out, bottom 300ms ease-out, width 300ms ease-out, height 300ms ease-out;
   transition: left 300ms ease-out, right 300ms ease-out, bottom 300ms ease-out, width 300ms ease-out, height 300ms ease-out;
@@ -326,7 +406,7 @@
 .e-control-wrapper.e-slider-container .e-scale {
   -webkit-box-sizing: content-box;
           box-sizing: content-box;
-  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";
+  font-family: var(--e-font-family);
   height: 28px;
   width: 100%;
   line-height: normal;
@@ -356,7 +436,7 @@
 }
 .e-control-wrapper.e-slider-container .e-scale .e-tick .e-tick-value {
   color: var(--color-sf-content-text-color-alt1);
-  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";
+  font-family: var(--e-font-family);
   font-size: 12px;
   outline: none;
   position: absolute;
@@ -446,7 +526,7 @@
   position: absolute;
   height: 20px;
   width: 20px;
-  border-radius: 10px;
+  border-radius: calc(var(--e-radius) * 0.625);
   -webkit-box-shadow: 0 2px 4px rgba(var(--color-sf-black), 0.075);
           box-shadow: 0 2px 4px rgba(var(--color-sf-black), 0.075);
   padding: 0;
@@ -509,13 +589,13 @@
 .e-control-wrapper.e-slider-container.e-bigger.e-horizontal .e-slider .e-limits {
   height: 8px;
   top: calc(50% - 4px);
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
 }
 .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 {
   width: 8px;
   left: calc(50% - 4px);
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
 }
 .e-bigger .e-control-wrapper.e-slider-container.e-horizontal .e-slider-button.e-first-button,
 .e-bigger .e-control-wrapper.e-slider-container.e-horizontal .e-slider-button.e-second-button, .e-bigger .e-control-wrapper.e-slider-container.e-vertical .e-slider-button.e-first-button,
@@ -524,7 +604,7 @@
 .e-control-wrapper.e-slider-container.e-bigger.e-horizontal .e-slider-button.e-second-button,
 .e-control-wrapper.e-slider-container.e-bigger.e-vertical .e-slider-button.e-first-button,
 .e-control-wrapper.e-slider-container.e-bigger.e-vertical .e-slider-button.e-second-button {
-  border-radius: 12px;
+  border-radius: calc(var(--e-radius) * 0.75);
   height: 24px;
   width: 24px;
 }
@@ -622,15 +702,13 @@
 .e-bigger .e-control-wrapper.e-slider-container.e-vertical .e-slider .e-handle,
 .e-control-wrapper.e-slider-container.e-bigger.e-vertical .e-slider .e-handle {
   left: calc(50% - 9px);
-  margin-bottom: -9px;
-  left: calc(50% - 8px);
   margin-bottom: -8px;
 }
 .e-bigger .e-control-wrapper.e-slider-container.e-vertical .e-slider-track,
 .e-bigger .e-control-wrapper.e-slider-container.e-vertical .e-range,
 .e-control-wrapper.e-slider-container.e-bigger.e-vertical .e-slider-track,
 .e-control-wrapper.e-slider-container.e-bigger.e-vertical .e-range {
-  width: 6px;
+  width: 4px;
 }
 .e-bigger .e-control-wrapper.e-slider-container.e-rtl.e-horizontal .e-slider .e-handle,
 .e-control-wrapper.e-slider-container.e-bigger.e-rtl.e-horizontal .e-slider .e-handle {

package/styles/slider/bootstrap5.3.scss

@@ -1,6 +1,6 @@
-@import 'ej2-base/styles/definition/bootstrap5.3.scss';
-@import 'ej2-popups/styles/popup/bootstrap5.3-definition.scss';
-@import 'ej2-popups/styles/tooltip/bootstrap5.3-definition.scss';
-@import 'bootstrap5.3-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap5.3' as *;
+@use 'ej2-popups/styles/popup/bootstrap5.3-definition' as *;
+@use 'ej2-popups/styles/tooltip/bootstrap5.3-definition' as *;
+@use 'bootstrap5.3-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/slider/bootstrap5.css

@@ -154,7 +154,7 @@
 }
 .e-control-wrapper.e-slider-container.e-horizontal .e-range {
   height: 6px;
-  top: calc(50% - 2px);
+  top: calc(50% - 3px);
   top: calc(50% - 3px);
 }
 .e-control-wrapper.e-slider-container.e-horizontal .e-limits {
@@ -621,8 +621,6 @@
 }
 .e-bigger .e-control-wrapper.e-slider-container.e-vertical .e-slider .e-handle,
 .e-control-wrapper.e-slider-container.e-bigger.e-vertical .e-slider .e-handle {
-  left: calc(50% - 9px);
-  margin-bottom: -9px;
   left: calc(50% - 8px);
   margin-bottom: -8px;
 }
@@ -630,7 +628,7 @@
 .e-bigger .e-control-wrapper.e-slider-container.e-vertical .e-range,
 .e-control-wrapper.e-slider-container.e-bigger.e-vertical .e-slider-track,
 .e-control-wrapper.e-slider-container.e-bigger.e-vertical .e-range {
-  width: 6px;
+  width: 4px;
 }
 .e-bigger .e-control-wrapper.e-slider-container.e-rtl.e-horizontal .e-slider .e-handle,
 .e-control-wrapper.e-slider-container.e-bigger.e-rtl.e-horizontal .e-slider .e-handle {

package/styles/slider/bootstrap5.scss

@@ -1,6 +1,6 @@
-@import 'ej2-base/styles/definition/bootstrap5.scss';
-@import 'ej2-popups/styles/popup/bootstrap5-definition.scss';
-@import 'ej2-popups/styles/tooltip/bootstrap5-definition.scss';
-@import 'bootstrap5-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap5' as *;
+@use 'ej2-popups/styles/popup/bootstrap5-definition' as *;
+@use 'ej2-popups/styles/tooltip/bootstrap5-definition' as *;
+@use 'bootstrap5-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/slider/fabric-dark.css

@@ -179,7 +179,6 @@
   overflow: hidden;
   left: calc(50% - 2px);
   width: 4px;
-  border-radius: 4px;
 }
 .e-control-wrapper.e-slider-container.e-vertical.e-small-size.e-slider-btn {
   height: 100%;

package/styles/slider/fabric-dark.scss

@@ -1,6 +1,6 @@
-@import 'ej2-base/styles/definition/fabric-dark.scss';
-@import 'ej2-popups/styles/popup/fabric-dark-definition.scss';
-@import 'ej2-popups/styles/tooltip/fabric-dark-definition.scss';
-@import 'fabric-dark-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fabric-dark' as *;
+@use 'ej2-popups/styles/popup/fabric-dark-definition' as *;
+@use 'ej2-popups/styles/tooltip/fabric-dark-definition' as *;
+@use 'fabric-dark-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/slider/fabric.css

@@ -179,7 +179,6 @@
   overflow: hidden;
   left: calc(50% - 2px);
   width: 4px;
-  border-radius: 4px;
 }
 .e-control-wrapper.e-slider-container.e-vertical.e-small-size.e-slider-btn {
   height: 100%;

package/styles/slider/fabric.scss

@@ -1,6 +1,6 @@
-@import 'ej2-base/styles/definition/fabric.scss';
-@import 'ej2-popups/styles/popup/fabric-definition.scss';
-@import 'ej2-popups/styles/tooltip/fabric-definition.scss';
-@import 'fabric-definition.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fabric' as *;
+@use 'ej2-popups/styles/popup/fabric-definition' as *;
+@use 'ej2-popups/styles/tooltip/fabric-definition' as *;
+@use 'fabric-definition' as *;
+@use 'all' as *;
+@use 'bigger' as *;