diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6bcb0c987..e0ad01723 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 The following is a curated list of changes in the Enact agate module, newest changes on the top.
 
+## [not released]
+
+### Fixed
+
+- `agate/IncrementSlider` and `agate/Slider` vertical knob alignment in Electro skin.
+
 ## [3.0.0-alpha.2] - 2024-11-21
 
 ### Fixed
diff --git a/IncrementSlider/IncrementSlider.module.less b/IncrementSlider/IncrementSlider.module.less
index ebacc904d..34139ee49 100644
--- a/IncrementSlider/IncrementSlider.module.less
+++ b/IncrementSlider/IncrementSlider.module.less
@@ -102,6 +102,7 @@
 				order: 2;
 				margin: @agate-incrementslider-vertical-slider-margin;
 				padding: @agate-incrementslider-vertical-slider-padding;
+				transform: @agate-incrementslider-bg-transform-vertical;
 
 				&::before {
 					border-radius: @agate-incrementslider-border-radius;
diff --git a/Slider/Slider.module.less b/Slider/Slider.module.less
index 3d6f081f6..952ea4ad1 100644
--- a/Slider/Slider.module.less
+++ b/Slider/Slider.module.less
@@ -136,6 +136,10 @@
 			.knob {
 				bottom: ~"calc(var(--ui-slider-proportion-end-knob) * 100%)";
 				top: auto;
+
+				&::before {
+					transform: @agate-slider-knob-transform-vertical;
+				}
 			}
 		}
 
@@ -199,6 +203,12 @@
 					width: @agate-slider-active-knob-width;
 					border-radius: @agate-slider-active-knob-border-radius;
 				}
+
+				&.vertical {
+					.knob::before {
+						transform: @agate-slider-active-knob-transform-vertical;
+					}
+				}
 			}
 
 			:global(.spotlight-input-touch) &.pressed {
diff --git a/styles/variables-base.less b/styles/variables-base.less
index 0a7e80518..6b0ab9821 100644
--- a/styles/variables-base.less
+++ b/styles/variables-base.less
@@ -713,6 +713,7 @@
 @agate-slider-active-knob-border-radius: @agate-slider-knob-border-radius;
 @agate-slider-active-knob-height: @agate-slider-knob-height;
 @agate-slider-active-knob-transform: @agate-slider-knob-transform;
+@agate-slider-active-knob-transform-vertical: @agate-slider-active-knob-transform;
 @agate-slider-active-knob-width: @agate-slider-active-knob-height;
 @agate-slider-active-tiny-knob-height: @agate-slider-active-knob-height;
 @agate-slider-active-tiny-knob-width: @agate-slider-active-knob-width;
@@ -731,6 +732,7 @@
 @agate-slider-knob-height: @agate-slider-height;
 @agate-slider-knob-resting-state-scale: 1;
 @agate-slider-knob-transform: @agate-translate-center;
+@agate-slider-knob-transform-vertical: @agate-slider-knob-transform;
 @agate-slider-knob-width: @agate-slider-knob-height;
 @agate-slider-tiny-knob-height: @agate-slider-knob-height;
 @agate-slider-tiny-knob-width: @agate-slider-knob-width;
@@ -751,6 +753,7 @@
 // IncrementSlider
 // ---------------------------------------
 @agate-incrementslider-bg-transform: none;
+@agate-incrementslider-bg-transform-vertical: none;
 @agate-incrementslider-border-radius: 0;
 @agate-incrementslider-horizontal-button-decrement-border-radius: @agate-slider-height 0 0 @agate-slider-height;
 @agate-incrementslider-horizontal-button-decrement-border-width: 0;
diff --git a/styles/variables-electro.less b/styles/variables-electro.less
index abeb0090d..6ed397389 100644
--- a/styles/variables-electro.less
+++ b/styles/variables-electro.less
@@ -137,10 +137,12 @@
 
 // Slider
 // ---------------------------------------
+@agate-slider-active-knob-transform-vertical: @agate-translate-center scale(@agate-slider-knob-resting-state-scale) rotate(90deg);
 @agate-slider-active-knob-width: @agate-slider-knob-width;
 @agate-slider-knob-border-radius: @electro-border-radius;
 @agate-slider-knob-resting-state-scale: 0.8;
 @agate-slider-knob-transform: @agate-translate-center scale(@agate-slider-knob-resting-state-scale) skewX(@electro-skew);
+@agate-slider-knob-transform-vertical: @agate-translate-center scale(@agate-slider-knob-resting-state-scale) rotate(90deg);
 @agate-slider-knob-width: 30px;
 @agate-slider-border-radius: @electro-border-radius;
 @agate-slider-horizontal-margin: 3px 21px;
@@ -156,6 +158,7 @@
 // IncrementSlider
 // ---------------------------------------
 @agate-incrementslider-bg-transform: skewX(-@electro-skew);
+@agate-incrementslider-bg-transform-vertical: skewX(0);
 @electro-incrementslider-horizontal-slider-undertuck: 15px; // the amount the slider tucks underneath the side buttons
 @agate-incrementslider-horizontal-margin: 3px @agate-component-spacing;
 @agate-incrementslider-horizontal-slider-margin: 0 -@electro-incrementslider-horizontal-slider-undertuck;