diff --git a/packages/main/src/SliderBase.hbs b/packages/main/src/SliderBase.hbs
index af7a4f5a0ec9..baf1d1862591 100644
--- a/packages/main/src/SliderBase.hbs
+++ b/packages/main/src/SliderBase.hbs
@@ -1,5 +1,5 @@
 <div
-	class="ui5-slider-root"
+	class="ui5-slider-root {{classes.root}}"
 	@mousedown="{{_onmousedown}}"
 	@touchstart="{{_ontouchstart}}"
 	@mouseover="{{_onmouseover}}"
diff --git a/packages/main/src/SliderBase.js b/packages/main/src/SliderBase.js
index 464e8265a3d8..639a8866521f 100644
--- a/packages/main/src/SliderBase.js
+++ b/packages/main/src/SliderBase.js
@@ -3,6 +3,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import Float from "@ui5/webcomponents-base/dist/types/Float.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import "@ui5/webcomponents-icons/dist/source-code.js";
 import {
 	isEscape, isHome, isEnd, isUp, isDown, isRight, isLeft, isUpCtrl, isDownCtrl, isRightCtrl, isLeftCtrl, isPlus, isMinus, isPageUp, isPageDown,
@@ -229,6 +230,9 @@ class SliderBase extends UI5Element {
 
 	get classes() {
 		return {
+			root: {
+				"ui5-slider-root-phone": isPhone(),
+			},
 			labelContainer: {
 				"ui5-slider-hidden-labels": this._labelsOverlapping,
 			},
diff --git a/packages/main/src/themes/SliderBase.css b/packages/main/src/themes/SliderBase.css
index c4c6cfde63af..9d47286f13d4 100644
--- a/packages/main/src/themes/SliderBase.css
+++ b/packages/main/src/themes/SliderBase.css
@@ -89,7 +89,7 @@
 	outline: none;
 }
 
-.ui5-slider-progress:focus::before {
+.ui5-slider-root:not(.ui5-slider-root-phone) .ui5-slider-progress:focus::before {
 	display: var(--_ui5_range_slider_legacy_progress_focus_display);
 	content: '';
 	position: absolute;
@@ -159,7 +159,8 @@
 	border: var(--_ui5_slider_handle_hover_border);
 }
 
-.ui5-slider-root:focus .ui5-slider-inner .ui5-slider-handle, .ui5-slider-inner .ui5-slider-handle:focus {
+.ui5-slider-root:not(.ui5-slider-root-phone):focus .ui5-slider-inner .ui5-slider-handle,
+.ui5-slider-root:not(.ui5-slider-root-phone) .ui5-slider-inner .ui5-slider-handle:focus {
 	outline: var(--_ui5_slider_handle_outline);
 	outline-offset: var(--_ui5_slider_handle_outline_offset);
 	border: var(--_ui5_slider_handle_focus_border);