diff --git a/angular/lib/src/lib/slider/slider.component.ts b/angular/lib/src/lib/slider/slider.component.ts
index 4a72b2850d..c1b2cceb1b 100644
--- a/angular/lib/src/lib/slider/slider.component.ts
+++ b/angular/lib/src/lib/slider/slider.component.ts
@@ -75,8 +75,8 @@ import {take} from 'rxjs';
 				[attr.aria-orientation]="state().vertical ? 'vertical' : null"
 				[disabled]="state().disabled"
 				[class]="state().vertical ? 'au-slider-handle-vertical' : 'au-slider-handle-horizontal'"
-				[style.left.%]="state().handleDisplayOptions[item.id].left"
-				[style.top.%]="state().handleDisplayOptions[item.id].top"
+				[style.left.%]="state().vertical ? null : state().handleDisplayOptions[item.id].left"
+				[style.top.%]="state().vertical ? state().handleDisplayOptions[item.id].top : null"
 				(keydown)="onKeyDown($event, item.id)"
 				(mousedown)="widget.actions.mouseDown($event, item.id)"
 			>
diff --git a/e2e/samplesMarkup.e2e-spec.ts-snapshots/slider-default.html b/e2e/samplesMarkup.e2e-spec.ts-snapshots/slider-default.html
index 5449f7db3d..9c408dd965 100644
--- a/e2e/samplesMarkup.e2e-spec.ts-snapshots/slider-default.html
+++ b/e2e/samplesMarkup.e2e-spec.ts-snapshots/slider-default.html
@@ -44,7 +44,7 @@ <h2>
 				 aria-valuetext="70"
 				 class="au-slider-handle au-slider-handle-horizontal"
 				 role="slider"
-				 style="left: 70%; top: 0%;"
+				 style="left: 70%;"
 				/>
 				<div
 				 class="au-slider-label au-slider-label-now"
@@ -94,7 +94,7 @@ <h2>
 				 aria-valuetext="20"
 				 class="au-slider-handle au-slider-handle-horizontal"
 				 role="slider"
-				 style="left: 20%; top: 0%;"
+				 style="left: 20%;"
 				/>
 				<div
 				 class="au-slider-label au-slider-label-now"
@@ -147,7 +147,7 @@ <h2>
 				 class="au-slider-handle au-slider-handle-horizontal"
 				 disabled=""
 				 role="slider"
-				 style="left: 60%; top: 0%;"
+				 style="left: 60%;"
 				/>
 				<div
 				 class="au-slider-label au-slider-label-now"
diff --git a/e2e/samplesMarkup.e2e-spec.ts-snapshots/slider-playground.html b/e2e/samplesMarkup.e2e-spec.ts-snapshots/slider-playground.html
index 6ff6ea014a..cd466ab2c5 100644
--- a/e2e/samplesMarkup.e2e-spec.ts-snapshots/slider-playground.html
+++ b/e2e/samplesMarkup.e2e-spec.ts-snapshots/slider-playground.html
@@ -41,7 +41,7 @@
 				 aria-valuetext="0"
 				 class="au-slider-handle au-slider-handle-horizontal"
 				 role="slider"
-				 style="left: 0%; top: 0%;"
+				 style="left: 0%;"
 				/>
 				<div
 				 class="au-slider-label au-slider-label-now"
diff --git a/e2e/samplesMarkup.e2e-spec.ts-snapshots/slider-range.html b/e2e/samplesMarkup.e2e-spec.ts-snapshots/slider-range.html
index 738dfd68b7..9452598c10 100644
--- a/e2e/samplesMarkup.e2e-spec.ts-snapshots/slider-range.html
+++ b/e2e/samplesMarkup.e2e-spec.ts-snapshots/slider-range.html
@@ -56,7 +56,7 @@ <h2>
 				 aria-valuetext="10"
 				 class="au-slider-handle au-slider-handle-horizontal"
 				 role="slider"
-				 style="left: 10%; top: 0%;"
+				 style="left: 10%;"
 				/>
 				<div
 				 class="au-slider-label au-slider-label-now"
@@ -72,7 +72,7 @@ <h2>
 				 aria-valuetext="40"
 				 class="au-slider-handle au-slider-handle-horizontal"
 				 role="slider"
-				 style="left: 40%; top: 0%;"
+				 style="left: 40%;"
 				/>
 				<div
 				 class="au-slider-label au-slider-label-now"
@@ -88,7 +88,7 @@ <h2>
 				 aria-valuetext="50"
 				 class="au-slider-handle au-slider-handle-horizontal"
 				 role="slider"
-				 style="left: 50%; top: 0%;"
+				 style="left: 50%;"
 				/>
 				<div
 				 class="au-slider-label au-slider-label-now"
@@ -104,7 +104,7 @@ <h2>
 				 aria-valuetext="60"
 				 class="au-slider-handle au-slider-handle-horizontal"
 				 role="slider"
-				 style="left: 60%; top: 0%;"
+				 style="left: 60%;"
 				/>
 				<div
 				 class="au-slider-label au-slider-label-now"
@@ -120,7 +120,7 @@ <h2>
 				 aria-valuetext="90"
 				 class="au-slider-handle au-slider-handle-horizontal"
 				 role="slider"
-				 style="left: 90%; top: 0%;"
+				 style="left: 90%;"
 				/>
 				<div
 				 class="au-slider-label au-slider-label-now"
@@ -170,7 +170,7 @@ <h2>
 				 aria-valuetext="10"
 				 class="au-slider-handle au-slider-handle-horizontal"
 				 role="slider"
-				 style="left: 10%; top: 0%;"
+				 style="left: 10%;"
 				/>
 				<div
 				 class="au-slider-label au-slider-label-now"
@@ -186,7 +186,7 @@ <h2>
 				 aria-valuetext="40"
 				 class="au-slider-handle au-slider-handle-horizontal"
 				 role="slider"
-				 style="left: 40%; top: 0%;"
+				 style="left: 40%;"
 				/>
 				<div
 				 class="au-slider-label au-slider-label-now"
diff --git a/e2e/samplesMarkup.e2e-spec.ts-snapshots/slider-vertical.html b/e2e/samplesMarkup.e2e-spec.ts-snapshots/slider-vertical.html
index 00d61cb36a..a6ad9195c7 100644
--- a/e2e/samplesMarkup.e2e-spec.ts-snapshots/slider-vertical.html
+++ b/e2e/samplesMarkup.e2e-spec.ts-snapshots/slider-vertical.html
@@ -50,7 +50,7 @@
 						 aria-valuetext="10"
 						 class="au-slider-handle au-slider-handle-vertical"
 						 role="slider"
-						 style="left: 0%; top: 90%;"
+						 style="top: 90%;"
 						/>
 						<div
 						 class="au-slider-label-vertical au-slider-label-vertical-now"
@@ -67,7 +67,7 @@
 						 aria-valuetext="40"
 						 class="au-slider-handle au-slider-handle-vertical"
 						 role="slider"
-						 style="left: 0%; top: 60%;"
+						 style="top: 60%;"
 						/>
 						<div
 						 class="au-slider-label-vertical au-slider-label-vertical-now"
@@ -123,7 +123,7 @@
 						 aria-valuetext="40"
 						 class="au-slider-handle au-slider-handle-vertical"
 						 role="slider"
-						 style="left: 0%; top: 60%;"
+						 style="top: 60%;"
 						/>
 						<div
 						 class="au-slider-label-vertical au-slider-label-vertical-now"
diff --git a/e2e/slider/slider.e2e-spec.ts b/e2e/slider/slider.e2e-spec.ts
index b4175c7055..721491781c 100644
--- a/e2e/slider/slider.e2e-spec.ts
+++ b/e2e/slider/slider.e2e-spec.ts
@@ -10,7 +10,7 @@ const defaultExpectedState: {[key: string]: string | null} = {
 	ariaLabel: '60',
 	readonly: null,
 	disabled: null,
-	style: 'left: 60%; top: 0%;',
+	style: 'left: 60%;',
 };
 
 const defaultExpectedHandleState: {[key: string]: string | null}[] = [
@@ -22,7 +22,7 @@ const defaultExpectedHandleState: {[key: string]: string | null}[] = [
 		ariaLabel: '10',
 		readonly: null,
 		disabled: null,
-		style: 'left: 10%; top: 0%;',
+		style: 'left: 10%;',
 	},
 	{
 		value: '40',
@@ -32,7 +32,7 @@ const defaultExpectedHandleState: {[key: string]: string | null}[] = [
 		ariaLabel: '40',
 		readonly: null,
 		disabled: null,
-		style: 'left: 40%; top: 0%;',
+		style: 'left: 40%;',
 	},
 ];
 
@@ -45,7 +45,7 @@ const defaultExpectedHandleStateVertical: {[key: string]: string | null}[] = [
 		ariaLabel: '10',
 		readonly: null,
 		disabled: null,
-		style: 'left: 0%; top: 90%;',
+		style: 'top: 90%;',
 	},
 	{
 		value: '40',
@@ -55,7 +55,7 @@ const defaultExpectedHandleStateVertical: {[key: string]: string | null}[] = [
 		ariaLabel: '40',
 		readonly: null,
 		disabled: null,
-		style: 'left: 0%; top: 60%;',
+		style: 'top: 60%;',
 	},
 ];
 
@@ -73,7 +73,7 @@ test.describe(`Slider tests`, () => {
 			expectedState.value = '43';
 			expectedState.text = '43';
 			expectedState.ariaLabel = '43';
-			expectedState.style = 'left: 43%; top: 0%;';
+			expectedState.style = 'left: 43%;';
 
 			const sliderProgressLocator = sliderPO.locatorProgress;
 			const boundingBox = await sliderProgressLocator.boundingBox();
@@ -94,7 +94,7 @@ test.describe(`Slider tests`, () => {
 			expectedState.value = '88';
 			expectedState.text = '88';
 			expectedState.ariaLabel = '88';
-			expectedState.style = 'left: 88%; top: 0%;';
+			expectedState.style = 'left: 88%;';
 
 			const sliderHandleLocator = sliderPO.locatorHandle;
 			const sliderLocator = sliderPO.locatorRoot;
@@ -117,7 +117,7 @@ test.describe(`Slider tests`, () => {
 			expectedState.value = '0';
 			expectedState.text = '0';
 			expectedState.ariaLabel = '0';
-			expectedState.style = 'left: 0%; top: 0%;';
+			expectedState.style = 'left: 0%;';
 
 			const minLabelLocator = sliderPO.locatorMinLabelHorizontal;
 			const maxLabelLocator = sliderPO.locatorMaxLabelHorizontal;
@@ -136,7 +136,7 @@ test.describe(`Slider tests`, () => {
 			expectedState.text = '100';
 			expectedState.ariaLabel = '100';
 			expectedState.value = '100';
-			expectedState.style = 'left: 100%; top: 0%;';
+			expectedState.style = 'left: 100%;';
 
 			expect((await sliderPO.sliderHandleState())[0]).toEqual(expectedState);
 
@@ -188,7 +188,7 @@ test.describe(`Slider tests`, () => {
 			expectedState.value = '88';
 			expectedState.text = '88';
 			expectedState.ariaLabel = '88';
-			expectedState.style = 'left: 88%; top: 0%;';
+			expectedState.style = 'left: 88%;';
 			expectedState.readonly = null;
 
 			expect((await sliderPO.sliderHandleState())[0]).toEqual(expectedState);
@@ -207,7 +207,7 @@ test.describe(`Slider tests`, () => {
 			expectedState.value = '88';
 			expectedState.text = '88';
 			expectedState.ariaLabel = '88';
-			expectedState.style = 'left: 88%; top: 0%;';
+			expectedState.style = 'left: 88%;';
 
 			const sliderLocator = sliderPO.locatorRoot;
 			const boundingBox = await sliderLocator.boundingBox();
@@ -228,11 +228,11 @@ test.describe(`Slider tests`, () => {
 			expectedState[0].value = '40';
 			expectedState[0].text = '40';
 			expectedState[0].ariaLabel = '40';
-			expectedState[0].style = 'left: 40%; top: 0%;';
+			expectedState[0].style = 'left: 40%;';
 			expectedState[1].value = '83';
 			expectedState[1].text = '83';
 			expectedState[1].ariaLabel = '83';
-			expectedState[1].style = 'left: 83%; top: 0%;';
+			expectedState[1].style = 'left: 83%;';
 
 			const sliderHandleLocator = sliderPO.locatorHandle;
 			const sliderLocator = sliderPO.locatorRoot;
@@ -257,11 +257,11 @@ test.describe(`Slider tests`, () => {
 			expectedState[0].value = '0';
 			expectedState[0].text = '0';
 			expectedState[0].ariaLabel = '0';
-			expectedState[0].style = 'left: 0%; top: 0%;';
+			expectedState[0].style = 'left: 0%;';
 			expectedState[1].text = '40';
 			expectedState[1].ariaLabel = '40';
 			expectedState[1].value = '40';
-			expectedState[1].style = 'left: 40%; top: 0%;';
+			expectedState[1].style = 'left: 40%;';
 
 			const minLabelLocator = sliderPO.locatorMinLabelHorizontal;
 			const maxLabelLocator = sliderPO.locatorMaxLabelHorizontal;
@@ -281,11 +281,11 @@ test.describe(`Slider tests`, () => {
 			expectedState[0].text = '40';
 			expectedState[0].ariaLabel = '40';
 			expectedState[0].value = '40';
-			expectedState[0].style = 'left: 40%; top: 0%;';
+			expectedState[0].style = 'left: 40%;';
 			expectedState[1].text = '100';
 			expectedState[1].ariaLabel = '100';
 			expectedState[1].value = '100';
-			expectedState[1].style = 'left: 100%; top: 0%;';
+			expectedState[1].style = 'left: 100%;';
 
 			expect((await sliderPO.sliderHandleState()).at(0)).toEqual(expectedState[0]);
 			expect((await sliderPO.sliderHandleState()).at(1)).toEqual(expectedState[1]);
@@ -308,7 +308,7 @@ test.describe(`Slider tests`, () => {
 			expectedState.value = '80';
 			expectedState.text = '80';
 			expectedState.ariaLabel = '80';
-			expectedState.style = 'left: 0%; top: 20%;';
+			expectedState.style = 'top: 20%;';
 
 			const sliderLocator = sliderPO.locatorRoot;
 			const boundingBox = await sliderLocator.boundingBox();
@@ -329,7 +329,7 @@ test.describe(`Slider tests`, () => {
 			expectedState[0].value = '0';
 			expectedState[0].text = '0';
 			expectedState[0].ariaLabel = '0';
-			expectedState[0].style = 'left: 0%; top: 100%;';
+			expectedState[0].style = 'top: 100%;';
 
 			const minLabelLocator = sliderPO.locatorMinLabelVertical;
 			const maxLabelLocator = sliderPO.locatorMaxLabelVertical;
@@ -349,11 +349,11 @@ test.describe(`Slider tests`, () => {
 			expectedState[0].text = '40';
 			expectedState[0].ariaLabel = '40';
 			expectedState[0].value = '40';
-			expectedState[0].style = 'left: 0%; top: 60%;';
+			expectedState[0].style = 'top: 60%;';
 			expectedState[1].text = '100';
 			expectedState[1].ariaLabel = '100';
 			expectedState[1].value = '100';
-			expectedState[1].style = 'left: 0%; top: 0%;';
+			expectedState[1].style = 'top: 0%;';
 
 			expect((await sliderPO.sliderHandleState()).at(0)).toEqual(expectedState[0]);
 			expect((await sliderPO.sliderHandleState()).at(1)).toEqual(expectedState[1]);
diff --git a/react/lib/Slider.tsx b/react/lib/Slider.tsx
index 94544236c8..9d9c527d25 100644
--- a/react/lib/Slider.tsx
+++ b/react/lib/Slider.tsx
@@ -86,10 +86,15 @@ export function Slider(props: Partial<SliderProps>) {
 						aria-disabled={disabled ? 'true' : undefined}
 						aria-orientation={vertical ? 'vertical' : undefined}
 						disabled={disabled}
-						style={{
-							left: `${handleDisplayOptions[item.id].left}%`,
-							top: `${handleDisplayOptions[item.id].top}%`,
-						}}
+						style={
+							vertical
+								? {
+										top: `${handleDisplayOptions[item.id].top}%`,
+								  }
+								: {
+										left: `${handleDisplayOptions[item.id].left}%`,
+								  }
+						}
 						onKeyDown={(e) => keydown(e as unknown as KeyboardEvent, item.id)}
 						onMouseDown={(e) => mouseDown(e as unknown as MouseEvent, item.id)}
 					>
diff --git a/style-bootstrap/scss/_slider.scss b/style-bootstrap/scss/_slider.scss
index 281aa171d4..46912a646e 100644
--- a/style-bootstrap/scss/_slider.scss
+++ b/style-bootstrap/scss/_slider.scss
@@ -1,7 +1,30 @@
 $prefix: au-;
 
+/// Mixin used to redefine css variable for different size of slider
+/// In particular the size bar and the size of the handle
+/// The offset is used to add some space between the text and the slider
+@mixin setSliderSize($barSize, $handleSize, $fontSize, $offset) {
+	--#{$prefix}slider-font-size: #{$fontSize};
+	--#{$prefix}slider-border-radius: calc(#{$barSize} / 2);
+
+	--#{$prefix}slider-secondary-size: #{$barSize};
+
+	--#{$prefix}slider-margin-block-start: calc((#{$handleSize} - #{$barSize}) / 2 + #{$fontSize} * 1.5 + #{$offset});
+	--#{$prefix}slider-margin-block-end: calc((#{$handleSize} - #{$barSize}) / 2 + #{$offset});
+	--#{$prefix}slider-vertical-margin-inline-start: calc((#{$handleSize} - #{$barSize}) / 2 + #{$offset});
+	--#{$prefix}slider-vertical-margin-inline-end: calc((#{$handleSize} - #{$barSize}) / 2 + #{$offset} + 3ch + #{$offset});
+
+	--#{$prefix}slider-handle-size: #{$handleSize};
+
+	--#{$prefix}slider-label-margin-block-start: calc(-1 * (#{$fontSize} * 1.5 + (#{$handleSize} - #{$barSize}) / 2));
+	--#{$prefix}slider-label-vertical-margin-inline-start: calc((#{$handleSize} - #{$barSize}) / 2 + #{$barSize} + #{$offset});
+}
+
 .au-slider {
 	--#{$prefix}slider-background-color: #{$slider-color-background};
+	--#{$prefix}slider-font-size: #{$slider-font-size};
+	--#{$prefix}slider-border-radius: #{$slider-border-radius};
+	--#{$prefix}slider-line-height: #{$slider-line-height};
 
 	--#{$prefix}slider-primary-size: #{$slider-primary-size};
 	--#{$prefix}slider-secondary-size: #{$slider-secondary-size};
@@ -48,6 +71,9 @@ $prefix: au-;
 
 	display: flex;
 	background-color: var(--#{$prefix}slider-background-color);
+	border-radius: var(--#{$prefix}slider-border-radius);
+	font-size: var(--#{$prefix}slider-font-size);
+	line-height: var(--#{$prefix}slider-line-height);
 	position: relative;
 
 	&.au-slider-horizontal {
@@ -56,6 +82,7 @@ $prefix: au-;
 		margin-block-start: var(--#{$prefix}slider-margin-block-start);
 		margin-block-end: var(--#{$prefix}slider-margin-block-end);
 		.au-slider-handle-horizontal {
+			top: calc(50% - var(--#{$prefix}slider-handle-size) / 2);
 			transform: var(--#{$prefix}slider-translate-horizontal);
 		}
 	}
@@ -66,6 +93,7 @@ $prefix: au-;
 		margin-inline-start: var(--#{$prefix}slider-vertical-margin-inline-start);
 		margin-inline-end: var(--#{$prefix}slider-vertical-margin-inline-end);
 		.au-slider-handle-vertical {
+			left: calc(50% - var(--#{$prefix}slider-handle-size) / 2);
 			transform: var(--#{$prefix}slider-translate-vertical);
 		}
 	}
@@ -73,11 +101,11 @@ $prefix: au-;
 	.au-slider-handle {
 		background-color: var(--#{$prefix}slider-handle-color);
 		border: var(--#{$prefix}slider-handle-border);
-		width: var(--#{$prefix}slider-handle-size);
-		height: var(--#{$prefix}slider-handle-size);
 		border-radius: var(--#{$prefix}slider-handle-border-radius);
 		outline: var(--#{$prefix}slider-handle-outline);
 		position: absolute;
+		width: var(--#{$prefix}slider-handle-size);
+		height: var(--#{$prefix}slider-handle-size);
 
 		&:focus {
 			box-shadow: var(--#{$prefix}slider-handle-focus-box-shadow);
@@ -86,7 +114,7 @@ $prefix: au-;
 
 	.au-slider-progress {
 		background-color: var(--#{$prefix}slider-progress-color);
-		height: var(--#{$prefix}slider-progress-height);
+		border-radius: var(--#{$prefix}slider-border-radius);
 		position: absolute;
 	}
 
diff --git a/style-bootstrap/scss/_variables.scss b/style-bootstrap/scss/_variables.scss
index 402f22c036..522b86c200 100644
--- a/style-bootstrap/scss/_variables.scss
+++ b/style-bootstrap/scss/_variables.scss
@@ -2,29 +2,34 @@ $prefix: bs- !default;
 
 //slider variables
 $slider-color-background: var(--#{$prefix}secondary-bg) !default;
+$slider-font-size: 1rem !default;
+$slider-line-height: 1.5 !default;
 $slider-primary-size: 100% !default;
 $slider-secondary-size: 0.25rem !default;
-$slider-margin-block-start: 2rem !default;
-$slider-margin-block-end: 1rem !default;
+$slider-border-radius: 0.125rem !default;
+$slider-margin-block-start: 2rem !default; // calc
+$slider-margin-block-end: 1rem !default; // calc
 $slider-vertical-margin-inline-start: 1rem !default;
 $slider-vertical-margin-inline-end: 3rem !default;
-$slider-translate-vertical: translate(-40%, -50%) !default;
-$slider-translate-horizontal: translate(-50%, -40%) !default;
+$slider-translate-vertical: translateY(-50%) !default;
+$slider-translate-horizontal: translateX(-50%) !default;
 $focus-ring-opacity: 0.25 !default;
 $focus-ring-width: 0.25rem !default;
 $focus-ring-color: rgba(#0d6efd, $focus-ring-opacity) !default;
 $slider-handle-color: var(--#{$prefix}primary) !default;
-$slider-handle-size: 1.25rem;
+$slider-handle-size: 1.25rem !default;
 $slider-handle-border: none !default;
-$slider-handle-border-radius: 0.625rem !default;
+$slider-handle-border-radius: 50% !default;
 $slider-handle-outline: none !default;
 $slider-handle-focus-box-shadow: 0 0 0 $focus-ring-width $focus-ring-color !default;
 $slider-progress-color: var(--#{$prefix}primary) !default;
 $slider-progress-height: 0.25rem !default;
 $slider-progress-vertical-transform: rotate(90deg) !default;
-$slider-label-margin-block-start: -1.9rem !default;
-$slider-label-min-left: 0;
-$slider-label-max-right: 0;
+$slider-label-margin-block-start: calc(
+	-1 * (#{$slider-font-size} * #{$slider-line-height} + (#{$slider-handle-size} - #{$slider-secondary-size}) / 2)
+) !default;
+$slider-label-min-left: 0 !default;
+$slider-label-max-right: 0 !default;
 $slider-label-now-transform: translateX(-50%) !default;
 $slider-label-vertical-margin-inline-start: 1rem !default;
 $slider-label-vertical-min-transform: translateY(-75%) !default;
diff --git a/svelte/lib/slider/Slider.svelte b/svelte/lib/slider/Slider.svelte
index 145bdf9b8f..0b844d8e5b 100644
--- a/svelte/lib/slider/Slider.svelte
+++ b/svelte/lib/slider/Slider.svelte
@@ -98,8 +98,8 @@
 			aria-label={item.ariaLabel}
 			aria-orientation={$vertical$ ? 'vertical' : null}
 			disabled={$disabled$ ? true : null}
-			style:left={`${$handleDisplayOptions$[item.id].left}%`}
-			style:top={`${$handleDisplayOptions$[item.id].top}%`}
+			style:left={$vertical$ ? null : `${$handleDisplayOptions$[item.id].left}%`}
+			style:top={$vertical$ ? `${$handleDisplayOptions$[item.id].top}%` : null}
 			on:keydown={(e) => keydown(e, item.id)}
 			on:mousedown={(e) => mouseDown(e, item.id)}
 		>