diff --git a/packages/devextreme/js/ui/themes.js b/packages/devextreme/js/ui/themes.js
index 7d03e800ddc0..e230a3756d83 100644
--- a/packages/devextreme/js/ui/themes.js
+++ b/packages/devextreme/js/ui/themes.js
@@ -322,6 +322,10 @@ export function isMaterial(themeName) {
     return isTheme('material', themeName);
 }
 
+export function isFluent(themeName) {
+    return isTheme('fluent', themeName);
+}
+
 export function isGeneric(themeName) {
     return isTheme('generic', themeName);
 }
diff --git a/packages/devextreme/scss/widgets/base/_rangeSlider.scss b/packages/devextreme/scss/widgets/base/_rangeSlider.scss
index 37107695e7a3..62f3a7acea67 100644
--- a/packages/devextreme/scss/widgets/base/_rangeSlider.scss
+++ b/packages/devextreme/scss/widgets/base/_rangeSlider.scss
@@ -1,10 +1,4 @@
 .dx-rangeslider-start-handle {
   top: 0;
-  right: auto;
-  left: 0;
-}
-
-.dx-rtl .dx-rangeslider-start-handle {
-  right: 0;
-  left: auto;
+  inset-inline-start: 0;
 }
diff --git a/packages/devextreme/scss/widgets/base/_slider.scss b/packages/devextreme/scss/widgets/base/_slider.scss
index 7eafb187e802..11401d091840 100644
--- a/packages/devextreme/scss/widgets/base/_slider.scss
+++ b/packages/devextreme/scss/widgets/base/_slider.scss
@@ -10,13 +10,7 @@ $slider-tooltip-arrow-height: 7px;
   font-size: 0.85em;
 
   &:last-child {
-    right: 0;
-    left: auto;
-  }
-
-  .dx-rtl &:last-child {
-    left: 0;
-    right: auto;
+    inset-inline-end: 0;
   }
 }
 
@@ -71,7 +65,7 @@ $slider-tooltip-arrow-height: 7px;
 .dx-slider-handle {
   position: absolute;
   top: 0;
-  right: 0;
+  inset-inline-end: 0;
   pointer-events: auto;
   -webkit-user-drag: none;
 
@@ -86,11 +80,6 @@ $slider-tooltip-arrow-height: 7px;
   }
 }
 
-.dx-rtl .dx-slider-handle {
-  right: auto;
-  left: 0;
-}
-
 .dx-slider-tooltip-visible-on-hover {
   .dx-tooltip {
     visibility: hidden;
diff --git a/packages/devextreme/scss/widgets/fluent/_colors.scss b/packages/devextreme/scss/widgets/fluent/_colors.scss
index 7e05950d251b..6853a6be8c9d 100644
--- a/packages/devextreme/scss/widgets/fluent/_colors.scss
+++ b/packages/devextreme/scss/widgets/fluent/_colors.scss
@@ -52,6 +52,7 @@ $base-spin-icon-color: null !default;
 $base-bg: null !default;
 $base-bg-hover: null !default;
 $base-neutral-background: null !default;
+$base-neutral-background6: null !default;
 $base-neutral-foreground: null !default;
 $base-neutral-background-hover: null !default;
 
@@ -147,6 +148,7 @@ $scrollview-pulldown-path: null !default;
   $base-bg: rgba(255, 255, 255, 1) !default; // #ffffff
   $base-bg-hover: rgba(245, 245, 245, 1) !default; // #f5f5f5
   $base-neutral-background: rgba(245, 245, 245, 1) !default; // #f5f5f5
+  $base-neutral-background6: rgba(230, 230, 230, 1) !default; // #e6e6e6
   $base-neutral-background-hover: rgba(235, 235, 235, 1) !default; // #ebebeb
   $base-border-color: rgba(209, 209, 209, 1) !default; // d1d1d1
   $base-border-color-hover: darken($base-border-color, 3.92) !default; // c7c7c7
@@ -187,6 +189,7 @@ $scrollview-pulldown-path: null !default;
   $base-bg: rgba(41, 41, 41, 1) !default; // #292929
   $base-bg-hover: rgba(61, 61, 61, 1) !default; // #3d3d3d
   $base-neutral-background: rgba(20, 20, 20, 1) !default; // #f5f5f5
+  $base-neutral-background6: rgba(51, 51, 51, 1) !default; // #e6e6e6
   $base-neutral-background-hover: rgba(41, 41, 41, 1) !default; // #292929
   $base-border-color: rgba(102, 102, 102, 1) !default; // #666666
   $base-border-color-hover: lighten( $base-border-color, 5.88) !default; // #757575
diff --git a/packages/devextreme/scss/widgets/fluent/progressBar/_colors.scss b/packages/devextreme/scss/widgets/fluent/progressBar/_colors.scss
index 65acdf308084..1eef27f6c641 100644
--- a/packages/devextreme/scss/widgets/fluent/progressBar/_colors.scss
+++ b/packages/devextreme/scss/widgets/fluent/progressBar/_colors.scss
@@ -9,15 +9,21 @@
 * $name 10. Bar background color
 * $type color
 */
-$progressbar-bg: color.change($base-accent, $alpha: 0.3) !default;
+$progressbar-bg: $base-neutral-background6 !default;
 
 /**
 * $name 20. Selected range background color
 * $type color
 */
 $progressbar-range-bg: $base-accent !default;
-$progressbar-range-disabled-bg: color.change($base-accent, $alpha: 0.6) !default;
+$progressbar-container-disabled-bg: $base-neutral-background-disabled !default;
+$progressbar-range-disabled-bg: $base-foreground-disabled !default;
 $progressbar-range-indeterminate-color: $base-accent !default;
+$progressbar-range-invalid-color: $base-invalid-color !default;
+
+$progressbar-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-indeterminate-color, transparent 95%;
+$progressbar-disabled-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-disabled-bg, transparent 95%;
+$progressbar-invalid-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-invalid-color, transparent 95%;
 
 /**
 * $name 30. Label color
diff --git a/packages/devextreme/scss/widgets/fluent/progressBar/_index.scss b/packages/devextreme/scss/widgets/fluent/progressBar/_index.scss
index 5d21fa5d924c..57161321a2ef 100644
--- a/packages/devextreme/scss/widgets/fluent/progressBar/_index.scss
+++ b/packages/devextreme/scss/widgets/fluent/progressBar/_index.scss
@@ -9,47 +9,69 @@
 
 // adduse
 
-$fluent-bar-height: 4px;
-$fluent-background-width: 90%;
-$fluent-progressbar-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-indeterminate-color, transparent 95%;
-
 .dx-progressbar-container {
-  height: $fluent-bar-height;
+  height: $progressbar-height;
   background-color: $progressbar-bg;
+  border-radius: $progressbar-border-radius;
 }
 
 .dx-progressbar-range {
   position: relative;
   background-color: $progressbar-range-bg;
-  margin-top: -1px;
+  border-radius: $progressbar-border-radius;
   box-sizing: content-box;
 }
 
 .dx-progressbar-animating-container {
-  height: $fluent-bar-height;
+  height: $progressbar-height;
   background-color: $progressbar-bg;
-  background-size: $fluent-background-width 5px;
+  background-size: $progressbar-indeterminate-background-width 5px;
   animation: dx-loader 2s linear infinite;
+  border-radius: $progressbar-border-radius;
 
-  @include gradient-linear($fluent-progressbar-interdeterminate-state-gradient);
+  @include gradient-linear($progressbar-interdeterminate-state-gradient);
 
   background-repeat: repeat;
 }
 
+.dx-invalid {
+  .dx-progressbar-range {
+    background-color: $progressbar-range-invalid-color;
+  }
+
+  .dx-progressbar-animating-container {
+    @include gradient-linear($progressbar-invalid-interdeterminate-state-gradient);
+
+    background-repeat: repeat;
+  }
+}
+
 .dx-state-disabled {
+  &.dx-progressbar {
+    opacity: 1;
+  }
+
+  .dx-progressbar-container {
+    background-color: $progressbar-container-disabled-bg;
+  }
+
   .dx-progressbar-range {
     background-color: $progressbar-range-disabled-bg;
   }
 
   .dx-progressbar-animating-container {
     animation: none;
-    background-position-x: math.div($fluent-background-width, 2);
+
+    @include gradient-linear($progressbar-disabled-interdeterminate-state-gradient);
+
+    background-position-x: math.div($progressbar-indeterminate-background-width, 2);
   }
 }
 
 .dx-progressbar-status {
-  padding-top: $fluent-progressbar-status-padding;
+  margin-top: $progressbar-status-height;
   color: $progressbar-label-color;
+  height: $progressbar-status-height;
 
   .dx-progressbar .dx-position-right & {
     padding-top: 0;
@@ -62,10 +84,20 @@ $fluent-progressbar-interdeterminate-state-gradient: -90deg, transparent 5%, $pr
     .dx-progressbar-animating-container {
       animation: dx-loader-rtl 2s linear infinite;
 
-      @include gradient-linear($fluent-progressbar-interdeterminate-state-gradient);
+      @include gradient-linear($progressbar-interdeterminate-state-gradient);
 
       background-repeat: repeat;
     }
+
+    &.dx-state-disabled {
+      .dx-progressbar-animating-container {
+        animation: none;
+
+        @include gradient-linear($progressbar-disabled-interdeterminate-state-gradient);
+
+        background-position-x: math.div($progressbar-indeterminate-background-width, 2);
+      }
+    }
   }
 }
 
diff --git a/packages/devextreme/scss/widgets/fluent/progressBar/_sizes.scss b/packages/devextreme/scss/widgets/fluent/progressBar/_sizes.scss
index c89efc679df0..a2ae0aa05782 100644
--- a/packages/devextreme/scss/widgets/fluent/progressBar/_sizes.scss
+++ b/packages/devextreme/scss/widgets/fluent/progressBar/_sizes.scss
@@ -2,12 +2,16 @@
 
 // adduse
 
-$fluent-progressbar-status-padding: null !default;
+$progressbar-height: null !default;
+$progressbar-border-radius: $base-border-radius !default;
+$progressbar-status-height: 16px !default;
+$progressbar-status-margin: 2px !default;
+$progressbar-indeterminate-background-width: 90%;
 
 @if $size == "default" {
-  $fluent-progressbar-status-padding: 8px !default;
+  $progressbar-height: 4px !default;
 }
 
 @else if $size == "compact" {
-  $fluent-progressbar-status-padding: 4px !default;
+  $progressbar-height: 2px !default;
 }
diff --git a/packages/devextreme/scss/widgets/fluent/rangeSlider/_index.scss b/packages/devextreme/scss/widgets/fluent/rangeSlider/_index.scss
index 3555080ae994..7f4618192668 100644
--- a/packages/devextreme/scss/widgets/fluent/rangeSlider/_index.scss
+++ b/packages/devextreme/scss/widgets/fluent/rangeSlider/_index.scss
@@ -1,31 +1,14 @@
+@use "sass:math";
 @use "sass:color";
 @use "colors" as *;
 @use "../colors" as *;
 @use "sizes" as *;
 @use "../sizes" as *;
 @use "../../base/rangeSlider";
+@use "../slider/sizes" as *;
 
 // adduse
 
-
-$fluent-slider-handle-margin: -14px;
-
 .dx-rangeslider-start-handle {
-  margin-left: $fluent-slider-handle-margin;
-}
-
-.dx-state-disabled {
-  .dx-rangeslider-start-handle {
-    margin-left: -5px;
-  }
-}
-
-.dx-rtl {
-  .dx-rangeslider-start-handle {
-    margin-right: $fluent-slider-handle-margin;
-  }
-
-  &.dx-state-disabled .dx-rangeslider-start-handle {
-    margin-right: -5px;
-  }
+  margin-inline-start: math.div(-$fluent-slider-handle-size, 2);
 }
diff --git a/packages/devextreme/scss/widgets/fluent/slider/_colors.scss b/packages/devextreme/scss/widgets/fluent/slider/_colors.scss
index db3a6a7d7345..738485a23bb7 100644
--- a/packages/devextreme/scss/widgets/fluent/slider/_colors.scss
+++ b/packages/devextreme/scss/widgets/fluent/slider/_colors.scss
@@ -9,16 +9,17 @@
 * $name 10. Slider bar background color
 * $type color
 */
-$fluent-slider-bar-bg: color.change($base-accent, $alpha: 0.24) !default;
+$fluent-slider-bar-bg: $base-neutral-foreground !default; // color.change($base-accent, $alpha: 0.24) !default;
 
 /**
 * $name 20. Selected range background color
 * $type color
 */
 $fluent-slider-bg: $base-accent !default;
-$fluent-slider-active: color.change($base-accent, $alpha: 0.24) !default;
-$fluent-slider-disabled-bg: color.change($base-text-color, $alpha: 0.24) !default;
-$fluent-slider-bar-disabled-bg: color.change($base-text-color, $alpha: 0.24) !default;
+$fluent-slider-bg-hover: $base-accent-hover !default;
+$fluent-slider-bg-focused: $base-accent-active !default;
+$fluent-slider-disabled-bg: $base-foreground-disabled !default;
+$fluent-slider-bar-disabled-bg: $base-neutral-background-disabled !default;
 $fluent-slider-tooltip-bg: $base-accent !default;
 
 /**
diff --git a/packages/devextreme/scss/widgets/fluent/slider/_index.scss b/packages/devextreme/scss/widgets/fluent/slider/_index.scss
index 4d06fda4400e..5b7df4be57de 100644
--- a/packages/devextreme/scss/widgets/fluent/slider/_index.scss
+++ b/packages/devextreme/scss/widgets/fluent/slider/_index.scss
@@ -8,12 +8,6 @@
 
 // adduse
 
-$fluent-slider-radius: 50%;
-$fluent-slider-bar-height: 2px;
-$fluent-slider-handle-active-border-width: 2px;
-$fluent-slider-handle-inner-size: 12px;
-$fluent-slider-handle-inner-border-width: 1px;
-$fluent-slider-handle-inner-disabled-size: 2px;
 
 $fluent-slider-tooltip-popup-content-horizontal-padding: 3px;
 $fluent-slider-tooltip-width-without-paddings: $fluent-slider-tooltip-width - 2 * $fluent-slider-tooltip-popup-content-horizontal-padding;
@@ -23,20 +17,18 @@ $fluent-slider-disabled-tooltip-top-margin: 5px;
   height: $fluent-slider-wrapper-height;
 }
 
-.dx-slider-bar,
-.dx-slider-range {
-  margin-top: math.div($fluent-slider-wrapper-height - $fluent-slider-bar-height, 2);
-  height: $fluent-slider-bar-height;
-}
-
 .dx-slider-bar {
-  margin-right: math.div($fluent-slider-handle-size, 2) + $fluent-slider-handle-active-border-width;
-  margin-left: math.div($fluent-slider-handle-size, 2) + $fluent-slider-handle-active-border-width;
+  margin-top: math.div($fluent-slider-wrapper-height - $fluent-slider-track-height, 2);
+  margin-right: math.div($fluent-slider-handle-size, 2);
+  margin-left: math.div($fluent-slider-handle-size, 2);
   background: $fluent-slider-bar-bg;
+  height: $fluent-slider-track-height;
+  border-radius: $fluent-slider-track-border-radius;
 }
 
 .dx-slider-range {
-  top: math.div($fluent-slider-bar-height, 2) - math.div($fluent-slider-handle-size, 2);
+  height: $fluent-slider-track-height;
+  border-radius: $fluent-slider-track-border-radius;
 
   &.dx-slider-range-visible {
     background: $fluent-slider-bg;
@@ -44,24 +36,41 @@ $fluent-slider-disabled-tooltip-top-margin: 5px;
 }
 
 .dx-slider-handle {
-  margin-top: math.div($fluent-slider-bar-height, 2) - math.div($fluent-slider-handle-size, 2);
-  margin-right: math.div(-$fluent-slider-handle-size, 2);
+  margin-top: math.div($fluent-slider-track-height, 2) - math.div($fluent-slider-handle-size, 2);
+  margin-inline-end: math.div(-$fluent-slider-handle-size, 2);
   width: $fluent-slider-handle-size;
   height: $fluent-slider-handle-size;
   border-radius: $fluent-slider-radius;
+  border-width: 1px;
+  border-style: solid;
+  border-color: $base-border-color;
+  background-color: $base-bg;
 
   &::after {
     position: absolute;
-    top: 50%;
-    left: 50%;
     display: block;
-    margin-top: math.div(-$fluent-slider-handle-inner-size, 2);
-    margin-left: math.div(-$fluent-slider-handle-inner-size, 2);
-    width: $fluent-slider-handle-inner-size;
-    height: $fluent-slider-handle-inner-size;
+    inset: 0;
     background: $fluent-slider-bg;
     content: "";
     border-radius: $fluent-slider-radius;
+    border-width: 3px;
+    border-style: solid;
+    border-color: $base-bg;
+  }
+
+  &.dx-state-hover {
+    &::after {
+      background: $fluent-slider-bg-hover;
+    }
+  }
+
+  &.dx-state-active,
+  &.dx-state-focused {
+    border-color: $fluent-slider-bg-focused;
+
+    &::after {
+      background: $fluent-slider-bg-focused;
+    }
   }
 
   .dx-tooltip-wrapper {
@@ -123,10 +132,6 @@ $fluent-slider-disabled-tooltip-top-margin: 5px;
       }
     }
   }
-
-  .dx-inkripple-wave {
-    background-color: $fluent-slider-active;
-  }
 }
 
 .dx-slider-tooltip-position-top {
@@ -149,6 +154,27 @@ $fluent-slider-disabled-tooltip-top-margin: 5px;
   }
 }
 
+.dx-invalid {
+  .dx-slider-handle {
+    &.dx-state-focused {
+      border-color: $base-invalid-color;
+    }
+
+    &::after {
+      background-color: $base-invalid-color;
+    }
+  }
+
+  .dx-slider-range-visible {
+    background-color: $base-invalid-color;
+    border-color: $base-invalid-color;
+  }
+
+  .dx-slider-bar {
+    background-color: color.change($base-invalid-color, $alpha: 0.4);
+  }
+}
+
 .dx-state-disabled {
   &.dx-slider,
   .dx-slider {
@@ -159,62 +185,25 @@ $fluent-slider-disabled-tooltip-top-margin: 5px;
     }
   }
 
-  .dx-slider-bar {
-    background: $fluent-slider-bar-disabled-bg;
-  }
-
-  .dx-slider-range.dx-slider-range-visible {
-    background: $fluent-slider-disabled-bg;
-  }
-
-  .dx-slider-handle {
-    width: 12px;
-    height: 12px;
-    margin-top: -5px;
-    margin-right: -5px;
-    border-radius: 50%;
-    border: 2px solid $base-bg;
+  &.dx-slider-handle {
+    border-color: $fluent-slider-disabled-bg;
 
     &::after {
-      margin-top: math.div(-$fluent-slider-handle-inner-disabled-size, 2) - $fluent-slider-handle-inner-border-width - 2px;
-      margin-left: math.div(-$fluent-slider-handle-inner-disabled-size, 2) - $fluent-slider-handle-inner-border-width - 2px;
-      width: 8px;
-      height: 8px;
-      background: grey;
-    }
-
-    .dx-overlay-content {
-      margin-top: -12px;
+      background: $fluent-slider-disabled-bg;
     }
   }
-}
-
-.dx-invalid {
-  .dx-slider-handle::after {
-    background-color: $base-invalid-color;
-  }
 
-  .dx-slider-range-visible {
-    background-color: $base-invalid-color;
-    border-color: $base-invalid-color;
+  .dx-slider-bar {
+    background: $fluent-slider-bar-disabled-bg;
   }
 
-  .dx-slider-bar {
-    background-color: color.change($base-invalid-color, $alpha: 0.4);
+  .dx-slider-range.dx-slider-range-visible {
+    background: $fluent-slider-disabled-bg;
   }
 }
 
 .dx-rtl {
-  .dx-slider-handle {
-    margin-left: math.div(-$fluent-slider-handle-size, 2);
-  }
-
   &.dx-state-disabled {
-    .dx-slider-handle {
-      margin-left: -5px;
-      margin-right: 0;
-    }
-
     .dx-overlay-content {
       margin-left: -13px;
     }
diff --git a/packages/devextreme/scss/widgets/fluent/slider/_sizes.scss b/packages/devextreme/scss/widgets/fluent/slider/_sizes.scss
index 25ca8e5f0d0d..c30a5e7e436a 100644
--- a/packages/devextreme/scss/widgets/fluent/slider/_sizes.scss
+++ b/packages/devextreme/scss/widgets/fluent/slider/_sizes.scss
@@ -7,19 +7,31 @@ $fluent-slider-wrapper-height: null !default;
 $fluent-slider-tooltip-width: null !default;
 $fluent-slider-top-tooltip-margin: null !default;
 
-$fluent-slider-width: 14px !default;
-$fluent-slider-track-height: 4px !default;
-$fluent-slider-height: 28px !default;
+$fluent-slider-height: 28px !default; // for fieldset height
+$fluent-slider-radius: 50% !default;
+$fluent-slider-track-height: null !default; // 2px !default;
+$fluent-slider-track-border-radius: 2px !default;
+$fluent-slider-handle-active-border-width: 2px !default;
+$fluent-slider-handle-height: null !default;
+$fluent-slider-handle-inner-size: null !default; // 12px !default;
+$fluent-slider-handle-inner-border-width: 1px !default;
+$fluent-slider-handle-inner-disabled-size: 2px !default;
 
 @if $size == "default" {
-  $fluent-slider-handle-size: 32px !default;
+  $fluent-slider-track-height: 4px !default;
+  $fluent-slider-handle-height: 18px !default;
+  $fluent-slider-handle-size: 20px !default; // 32px !default;
+  $fluent-slider-handle-inner-size: 18px !default; // 12px !default;
   $fluent-slider-wrapper-height: 32px !default;
   $fluent-slider-tooltip-width: 34px !default;
   $fluent-slider-top-tooltip-margin: -5px !default;
 }
 
 @else if $size == "compact" {
-  $fluent-slider-handle-size: 26px !default;
+  $fluent-slider-track-height: 2px !default;
+  $fluent-slider-handle-height: 14px !default;
+  $fluent-slider-handle-size: 16px !default; // 26px !default;
+  $fluent-slider-handle-inner-size: 14px !default; // 12px !default;
   $fluent-slider-wrapper-height: 26px !default;
   $fluent-slider-tooltip-width: 28px !default;
   $fluent-slider-top-tooltip-margin: -2px !default;
diff --git a/packages/devextreme/scss/widgets/generic/rangeSlider/_index.scss b/packages/devextreme/scss/widgets/generic/rangeSlider/_index.scss
index 6e689d070ab5..16ef95142d43 100644
--- a/packages/devextreme/scss/widgets/generic/rangeSlider/_index.scss
+++ b/packages/devextreme/scss/widgets/generic/rangeSlider/_index.scss
@@ -11,9 +11,5 @@
 $generic-slider-handle-margin: -7px;
 
 .dx-rangeslider-start-handle {
-  margin-left: $generic-slider-handle-margin;
-}
-
-.dx-rtl .dx-rangeslider-start-handle {
-  margin-right: $generic-slider-handle-margin;
+  margin-inline-start: $generic-slider-handle-margin;
 }
diff --git a/packages/devextreme/scss/widgets/generic/slider/_index.scss b/packages/devextreme/scss/widgets/generic/slider/_index.scss
index 6e962e0456e6..d3b9ffab87f1 100644
--- a/packages/devextreme/scss/widgets/generic/slider/_index.scss
+++ b/packages/devextreme/scss/widgets/generic/slider/_index.scss
@@ -77,7 +77,7 @@ $generic-slider-radius: 2px;
 
 .dx-slider-handle {
   margin-top: math.div(-$generic-slider-height, 2);
-  margin-right: math.div(-$generic-slider-width, 2);
+  margin-inline-end: math.div(-$generic-slider-width, 2);
   width: $generic-slider-width;
   height: $generic-slider-height;
   border: 1px solid $slider-handle-border-color;
@@ -117,7 +117,3 @@ $generic-slider-radius: 2px;
   }
 }
 
-.dx-rtl .dx-slider-handle {
-  margin-left: math.div(-($generic-slider-width + 1px), 2);
-}
-
diff --git a/packages/devextreme/scss/widgets/material/slider/_index.scss b/packages/devextreme/scss/widgets/material/slider/_index.scss
index d492840b7ae4..5d8a6a0361ea 100644
--- a/packages/devextreme/scss/widgets/material/slider/_index.scss
+++ b/packages/devextreme/scss/widgets/material/slider/_index.scss
@@ -9,7 +9,6 @@
 // adduse
 
 $material-slider-radius: 50%;
-$material-slider-bar-height: 2px;
 $material-slider-handle-active-border-width: 2px;
 $material-slider-handle-inner-size: 12px;
 $material-slider-handle-inner-border-width: 1px;
@@ -25,8 +24,8 @@ $material-slider-disabled-tooltip-top-margin: 5px;
 
 .dx-slider-bar,
 .dx-slider-range {
-  margin-top: math.div($material-slider-wrapper-height - $material-slider-bar-height, 2);
-  height: $material-slider-bar-height;
+  margin-top: math.div($material-slider-wrapper-height - $material-slider-track-height, 2);
+  height: $material-slider-track-height;
 }
 
 .dx-slider-bar {
@@ -36,7 +35,7 @@ $material-slider-disabled-tooltip-top-margin: 5px;
 }
 
 .dx-slider-range {
-  top: math.div($material-slider-bar-height, 2) - math.div($material-slider-handle-size, 2);
+  top: math.div($material-slider-track-height, 2) - math.div($material-slider-handle-size, 2);
 
   &.dx-slider-range-visible {
     background: $material-slider-bg;
@@ -44,7 +43,7 @@ $material-slider-disabled-tooltip-top-margin: 5px;
 }
 
 .dx-slider-handle {
-  margin-top: math.div($material-slider-bar-height, 2) - math.div($material-slider-handle-size, 2);
+  margin-top: math.div($material-slider-track-height, 2) - math.div($material-slider-handle-size, 2);
   margin-inline-end: math.div(-$material-slider-handle-size, 2);
   width: $material-slider-handle-size;
   height: $material-slider-handle-size;
diff --git a/packages/devextreme/scss/widgets/material/slider/_sizes.scss b/packages/devextreme/scss/widgets/material/slider/_sizes.scss
index 2382df7af59b..04f23e241149 100644
--- a/packages/devextreme/scss/widgets/material/slider/_sizes.scss
+++ b/packages/devextreme/scss/widgets/material/slider/_sizes.scss
@@ -7,8 +7,7 @@ $material-slider-wrapper-height: null !default;
 $material-slider-tooltip-width: null !default;
 $material-slider-top-tooltip-margin: null !default;
 
-$material-slider-width: 14px !default;
-$material-slider-track-height: 4px !default;
+$material-slider-track-height: 2px !default;
 $material-slider-height: 28px !default;
 
 @if $size == "default" {