fix(ui5-slider): align slider to the spec

aleksandar-terziev · aleksandar-terziev · commit 692d6b607567 · 2025-12-12T19:09:13.000+02:00
diff --git a/packages/main/src/Slider.ts b/packages/main/src/Slider.ts
@@ -312,8 +312,8 @@ class Slider extends SliderBase implements IFormInputElement {
 	get styles() {
 		return {
 			progress: {
-				"transform": `scaleX(${this._progressPercentage})`,
-				"transform-origin": `${this.directionStart} top`,
+				"width": `${this._handlePositionFromStart}%`,
+				"border": this._handlePositionFromStart === 0 ? "none" : "",
 			},
 			handle: {
 				[this.directionStart]: `${this._handlePositionFromStart}%`,
diff --git a/packages/main/src/themes/SliderBase.css b/packages/main/src/themes/SliderBase.css
@@ -19,7 +19,7 @@
 
 .ui5-slider-root {
 	box-sizing: border-box;
-	height: 3.3125rem;
+	height: var(--_ui5_slider_root_height);
 	outline: none;
 	padding: var(--_ui5_slider_padding);
 	touch-action: none;
@@ -68,13 +68,13 @@
 
 .ui5-slider-progress {
 	background: var(--_ui5_slider_progress_background);
-	border-radius: var(--_ui5_slider_progress_border_radius);
-	height: var(--_ui5_slider_progress_height);
-	position: relative;
+	border-radius: var(--_ui5_slider_active_progress_border_radius);
+	height: var(--_ui5_slider_active_progress_height);
+	position: absolute;
 	outline: none;
-	box-sizing: var(--_ui5_slider_active_progress_box_sizing);
+	box-sizing: content-box;
 	border: var(--_ui5_slider_active_progress_border);
-	left: var(--_ui5_slider_active_progress_left);
+	inset-inline-start: var(--_ui5_slider_active_progress_left);
 	top: var(--_ui5_slider_active_progress_top);
 }
 
@@ -247,9 +247,9 @@
 }
 
 :host([show-tickmarks]) .ui5-slider-progress {
-	height: var(--_ui5_slider_no_tickmarks_progress_height);
+	height: var(--_ui5_slider_no_tickmarks_active_progress_height);
 	border: var(--_ui5_slider_no_tickmarks_active_progress_border);
-	left: var(--_ui5_slider_no_tickmarks_active_progress_left);
+	inset-inline-start: var(--_ui5_slider_no_tickmarks_active_progress_left);
 	top: var(--_ui5_slider_no_tickmarks_active_progress_top);
 }
 
diff --git a/packages/main/src/themes/base/SliderBase-parameters.css b/packages/main/src/themes/base/SliderBase-parameters.css
@@ -4,17 +4,23 @@
 	--_ui5_slider_progress_container_dot_display: none;
 	--_ui5_slider_progress_container_dot_background: var(--sapField_BorderColor);
 	--_ui5_slider_progress_border: solid 0.0625rem var(--sapSlider_BorderColor);
+	--_ui5_slider_progress_before_background: transparent;
+	--_ui5_slider_progress_after_background: transparent;
+	--_ui5_slider_progress_before_border: none;
+	--_ui5_slider_progress_after_border: none;
 	--_ui5_slider_padding: 1.406rem 1.0625rem;
+	--_ui5_slider_root_height: 2.75rem;
 	--_ui5_slider_inner_height: 0.25rem;
+	--_ui5_slider_inner_min_width: 4rem;
 	--_ui5_slider_outer_height: 1.6875rem;
 	--_ui5_slider_progress_border_radius: 0.25rem;
 	--_ui5_slider_progress_background: var(--sapActiveColor);
 	--_ui5_slider_handle_icon_display: none;
 	--_ui5_range_slider_root_hover_handle_icon_display: none;
-	--_ui5_slider_handle_height: 1.625rem;
-	--_ui5_slider_handle_width: 1.625rem;
-	--_ui5_slider_handle_border: solid 0.125rem var(--sapField_BorderColor);
-	--_ui5_slider_handle_border_radius: 1rem;
+	--_ui5_slider_handle_height: 1.5rem;
+	--_ui5_slider_handle_width: 2rem;
+	--_ui5_slider_handle_border: 0.0625rem solid var(--sapField_BorderColor);
+	--_ui5_slider_handle_border_radius: 0.5rem;
 	--_ui5_slider_handle_background: var(--sapButton_Background);
 	--_ui5_range_slider_handle_background: #FFF;
 	--_ui5_slider_handle_top: -0.825rem;
@@ -49,9 +55,9 @@
 	--_ui5_range_slider_progress_focus_height: 2rem;
 	--_ui5_range_slider_legacy_progress_focus_display: block;
 	--_ui5_slider_handle_focus_width: 0;
-	--_ui5_slider_start_end_point_size: .375rem;
-	--_ui5_slider_start_end_point_left: -0.875rem;
-	--_ui5_slider_start_end_point_top: -.1875rem;
+	--_ui5_slider_start_end_point_size: 0.5rem;
+	--_ui5_slider_start_end_point_left: -0.75rem;
+	--_ui5_slider_start_end_point_top: -0.1875rem;
 	--_ui5_slider_handle_background_focus: var(--sapButton_Active_Background);
 	--_ui5_slider_handle_focused_tooltip_distance: var(--_ui5_slider_tooltip_bottom);
 	--_ui5_slider_handle_box_sizing: content-box;
@@ -61,33 +67,40 @@
 	--_ui5_range_slider_handle_background_focus: transparent;
 	--_ui5_range_slider_progress_focus_width: 100%;
 	--_ui5_range_slider_root_active_handle_icon_display: none;
-	--_ui5_slider_tickmark_height: 1rem;
-	--_ui5_slider_tickmark_top: -.3125rem;
+	--_ui5_slider_tickmark_height: 0.5rem;
+	--_ui5_slider_tickmark_top: -0.125rem;
 	--_ui5_slider_progress_box_sizing: border-box;
 	--_ui5_slider_active_progress_box_sizing: content-box;
-	--_ui5_slider_tickmark_in_range_bg: var(--sapField_BorderColor);
 	--_ui5_range_slider_focus_outline_width: 100%;
 	--_ui5_slider_progress_outline_offset_left: 0;
 	--_ui5_range_slider_focus_outline_radius: 0;
 
 	--_ui5_slider_progress_container_top: 0;
-	--_ui5_slider_progress_height: 100%;
+	--_ui5_slider_progress_height: 0.25rem;
 	--_ui5_slider_active_progress_border: solid 0.0625rem var(--sapSlider_Selected_BorderColor);
-	--_ui5_slider_active_progress_left: 0;
-	--_ui5_slider_active_progress_top: 0;
+	--_ui5_slider_active_progress_border_radius: 0.25rem;
+	--_ui5_slider_active_progress_left: -0.0625rem;
+	--_ui5_slider_active_progress_top: -0.0625rem;
+	--_ui5_slider_active_progress_padding: 0.125rem;
+	--_ui5_slider_active_progress_height: calc(var(--_ui5_slider_progress_height) - 0.125rem);
 
 	--_ui5_slider_no_tickmarks_progress_container_top: var(--_ui5_slider_progress_container_top);
 	--_ui5_slider_no_tickmarks_progress_height: var(--_ui5_slider_progress_height);
 	--_ui5_slider_no_tickmarks_active_progress_border: var(--_ui5_slider_active_progress_border);
-	--_ui5_slider_no_tickmarks_active_progress_left: var(--_ui5_slider_active_progress_left);
-	--_ui5_slider_no_tickmarks_active_progress_top: var(--_ui5_slider_active_progress_top);
+	--_ui5_slider_no_tickmarks_active_progress_left: -0.0625rem;
+	--_ui5_slider_no_tickmarks_active_progress_top: -0.0625rem;
+	--_ui5_slider_no_tickmarks_active_progress_height: calc(var(--_ui5_slider_no_tickmarks_progress_height) - 0.125rem);
 	--_ui5_slider_handle_focus_visibility: none;
-	--_ui5_slider_handle_icon_size: 1rem;
+	--_ui5_slider_handle_icon_size: 0.875rem;
 }
 
 [data-ui5-compact-size],
 .ui5-content-density-compact,
 .sapUiSizeCompact {
-	--_ui5_slider_handle_icon_size: .875rem;
+	--_ui5_slider_handle_icon_size: 0.875rem;
 	--_ui5_slider_padding: 1rem 1.0625rem;
+	--_ui5_slider_root_height: 2rem;
+	--_ui5_slider_handle_height: 1.25rem;
+	--_ui5_slider_handle_width: 1.5rem;
+	--_ui5_slider_handle_top: -0.5rem;
 }
diff --git a/packages/main/src/themes/sap_fiori_3/SliderBase-parameters.css b/packages/main/src/themes/sap_fiori_3/SliderBase-parameters.css
@@ -3,7 +3,7 @@
 :root {
 	--_ui5_slider_inner_min_width: 4rem;
 	--_ui5_range_slider_handle_background_focus: transparent;
-	--_ui5_slider_handle_top: -.875rem;
+	--_ui5_slider_handle_top: -0.8125rem;
 	--_ui5_range_slider_handle_background: transparent;
 	--_ui5_range_slider_handle_active_background: transparent;
 	--_ui5_slider_handle_background: var(--sapButton_Background);
@@ -13,7 +13,8 @@
 	--_ui5_slider_handle_width: 1.875rem;
 	--_ui5_slider_handle_height: 1.875rem;
 	--_ui5_slider_handle_box_sizing: border-box;
-	--_ui5_slider_tickmark_top: -.34375rem;
+	--_ui5_slider_tickmark_height: 1rem;
+	--_ui5_slider_tickmark_top: -0.375rem;
 }
 
 [data-ui5-compact-size],
diff --git a/packages/main/src/themes/sap_fiori_3_dark/SliderBase-parameters.css b/packages/main/src/themes/sap_fiori_3_dark/SliderBase-parameters.css
@@ -2,6 +2,7 @@
 
 :root {
 	--_ui5_slider_inner_min_width: 4rem;
+	--_ui5_slider_handle_top: -0.6875rem;
 	--_ui5_range_slider_handle_background: transparent;
 	--_ui5_range_slider_root_hover_handle_bg: transparent;
 }
diff --git a/packages/main/src/themes/sap_fiori_3_hcb/SliderBase-parameters.css b/packages/main/src/themes/sap_fiori_3_hcb/SliderBase-parameters.css
@@ -1,15 +1,26 @@
 @import "../base/SliderBase-parameters.css";
 
 :root {
-	--_ui5_slider_inner_height: 0.375rem;
+	--_ui5_slider_inner_height: 0.375rem; /* Total height including border */
+	--_ui5_slider_progress_box_sizing: border-box;
 	--_ui5_slider_progress_border: solid 0.0625rem var(--sapField_BorderColor);
 	--_ui5_slider_progress_border_radius: 0.375rem;
 	--_ui5_range_slider_handle_background: transparent;
 	--_ui5_slider_handle_hover_background: var(--sapButton_Hover_Background);
 	--_ui5_slider_handle_border: solid 0.125rem var(--sapField_BorderColor);
 	--_ui5_slider_handle_height: 1.65rem;
 	--_ui5_slider_handle_width: 1.65rem;
-	--_ui5_slider_handle_top: -0.75rem;
+	--_ui5_slider_handle_top: -0.6375rem; /* -(1.65rem handle - 0.375rem track) / 2 */
+	--_ui5_slider_handle_box_sizing: border-box;
 	--_ui5_slider_progress_background: var(--sapSelectedColor);
-	--_ui5_slider_tickmark_top: -0.2525rem;
+	--_ui5_slider_tickmark_height: 1rem;
+	--_ui5_slider_tickmark_top: -0.3125rem; /* -(1rem tickmark - 0.375rem track) / 2 */
+	--_ui5_slider_active_progress_border: none;
+	--_ui5_slider_active_progress_left: 0;
+	--_ui5_slider_active_progress_top: 0;
+	--_ui5_slider_active_progress_height: var(--_ui5_slider_progress_height);
+	--_ui5_slider_no_tickmarks_active_progress_border: none;
+	--_ui5_slider_no_tickmarks_active_progress_left: 0;
+	--_ui5_slider_no_tickmarks_active_progress_top: 0;
+	--_ui5_slider_no_tickmarks_active_progress_height: var(--_ui5_slider_no_tickmarks_progress_height);
 }
diff --git a/packages/main/src/themes/sap_fiori_3_hcb/sizes-parameters.css b/packages/main/src/themes/sap_fiori_3_hcb/sizes-parameters.css
@@ -1,10 +1,5 @@
 @import "../base/sizes-parameters.css";
 :root {
-	/* Slider, Range Slider */
-	--_ui5_slider_handle_width: 1.25rem;
-	--_ui5_slider_handle_height: 1.25rem;
-	--_ui5_slider_handle_top: -0.5rem;
-
 	/* ColorPicker */
 	--_ui5_color_picker_slider_handle_container_margin_top: -0.125rem;
 }
diff --git a/packages/main/src/themes/sap_fiori_3_hcw/SliderBase-parameters.css b/packages/main/src/themes/sap_fiori_3_hcw/SliderBase-parameters.css
@@ -1,14 +1,25 @@
 @import "../base/SliderBase-parameters.css";
 
 :root {
-	--_ui5_slider_inner_height: 0.375rem;
+	--_ui5_slider_inner_height: 0.375rem; /* Total height including border */
+	--_ui5_slider_progress_box_sizing: border-box;
 	--_ui5_slider_progress_border: solid 0.0625rem var(--sapField_BorderColor);
 	--_ui5_slider_progress_border_radius: 0.375rem;
 	--_ui5_range_slider_handle_background: transparent;
 	--_ui5_slider_handle_border: solid 0.125rem var(--sapField_BorderColor);
 	--_ui5_slider_handle_height: 1.65rem;
 	--_ui5_slider_handle_width: 1.65rem;
-	--_ui5_slider_handle_top: -0.75rem;
+	--_ui5_slider_handle_top: -0.6375rem; /* -(1.65rem handle - 0.375rem track) / 2 */
+	--_ui5_slider_handle_box_sizing: border-box;
 	--_ui5_slider_progress_background: var(--sapSelectedColor);
-	--_ui5_slider_tickmark_top: -0.2525rem;
+	--_ui5_slider_tickmark_height: 1rem;
+	--_ui5_slider_tickmark_top: -0.3125rem; /* -(1rem tickmark - 0.375rem track) / 2 */
+	--_ui5_slider_active_progress_border: none;
+	--_ui5_slider_active_progress_left: 0;
+	--_ui5_slider_active_progress_top: 0;
+	--_ui5_slider_active_progress_height: var(--_ui5_slider_progress_height);
+	--_ui5_slider_no_tickmarks_active_progress_border: none;
+	--_ui5_slider_no_tickmarks_active_progress_left: 0;
+	--_ui5_slider_no_tickmarks_active_progress_top: 0;
+	--_ui5_slider_no_tickmarks_active_progress_height: var(--_ui5_slider_no_tickmarks_progress_height);
 }
diff --git a/packages/main/src/themes/sap_fiori_3_hcw/sizes-parameters.css b/packages/main/src/themes/sap_fiori_3_hcw/sizes-parameters.css
@@ -1,10 +1,5 @@
 @import "../base/sizes-parameters.css";
 :root {
-	/* Slider, Range Slider */
-	--_ui5_slider_handle_width: 1.25rem;
-	--_ui5_slider_handle_height: 1.25rem;
-	--_ui5_slider_handle_top: -0.5rem;
-
 	/* ColorPicker */
 	--_ui5_color_picker_slider_handle_container_margin_top: -0.125rem;
 }
diff --git a/packages/main/src/themes/sap_horizon/SliderBase-parameters.css b/packages/main/src/themes/sap_horizon/SliderBase-parameters.css
@@ -37,7 +37,7 @@
 	--_ui5_slider_handle_focus_width: 1px;
 	--_ui5_slider_start_end_point_size: .5rem;
 	--_ui5_slider_start_end_point_left: -.75rem;
-	--_ui5_slider_start_end_point_top: -0.125rem;
+	--_ui5_slider_start_end_point_top: -0.1875rem;
 	--_ui5_slider_handle_focused_tooltip_distance: calc(var(--_ui5_slider_tooltip_bottom) - var(--_ui5_slider_handle_focus_width));
 	--_ui5_slider_tooltip_border_box: border-box;
 
@@ -62,6 +62,8 @@
 .ui5-content-density-compact,
 .sapUiSizeCompact {
 	--_ui5_slider_handle_width: 1.5rem;
+	--_ui5_slider_handle_height: 1.25rem;
+	--_ui5_slider_handle_top: -0.5rem;
 	--_ui5_range_slider_progress_focus_width: calc(100% + var(--_ui5_slider_handle_width) + 10px);
 	--_ui5_range_slider_progress_focus_height: calc(var(--_ui5_slider_handle_height) + 10px);
 	--_ui5_range_slider_progress_focus_top: -.8125rem;
diff --git a/packages/main/src/themes/sap_horizon_dark/SliderBase-parameters.css b/packages/main/src/themes/sap_horizon_dark/SliderBase-parameters.css
@@ -37,7 +37,7 @@
 	--_ui5_slider_handle_focus_width: 1px;
 	--_ui5_slider_start_end_point_size: .5rem;
 	--_ui5_slider_start_end_point_left: -.75rem;
-	--_ui5_slider_start_end_point_top: -0.125rem;
+	--_ui5_slider_start_end_point_top: -0.1875rem;
 	--_ui5_slider_handle_focused_tooltip_distance: calc(var(--_ui5_slider_tooltip_bottom) - var(--_ui5_slider_handle_focus_width));
 	--_ui5_slider_tooltip_border_box: border-box;
 
@@ -62,6 +62,8 @@
 .ui5-content-density-compact,
 .sapUiSizeCompact {
 	--_ui5_slider_handle_width: 1.5rem;
+	--_ui5_slider_handle_height: 1.25rem;
+	--_ui5_slider_handle_top: -0.5rem;
 	--_ui5_range_slider_progress_focus_width: calc(100% + var(--_ui5_slider_handle_width) + 10px);
 	--_ui5_range_slider_progress_focus_height: calc(var(--_ui5_slider_handle_height) + 10px);
 	--_ui5_range_slider_progress_focus_top: -.8125rem;
diff --git a/packages/main/src/themes/sap_horizon_hcb/SliderBase-parameters.css b/packages/main/src/themes/sap_horizon_hcb/SliderBase-parameters.css
@@ -10,15 +10,15 @@
 	--_ui5_slider_handle_hover_background: var(--sapButton_Hover_Background);
 	--_ui5_slider_handle_border: 0.0625rem solid var(--sapField_BorderColor);
 	--_ui5_slider_handle_hover_border: var(--_ui5_slider_handle_border);
-	--_ui5_slider_handle_top: -.5625rem;
+	--_ui5_slider_handle_top: -0.5625rem;
 	--_ui5_slider_handle_background_focus: var(--sapSlider_Active_RangeHandleBackground);
 	--_ui5_slider_handle_focus_border: 0.125rem solid var(--sapField_BorderColor);
 	--_ui5_slider_handle_outline: none;
 	--_ui5_slider_handle_box_sizing: border-box;
 	--_ui5_range_slider_handle_background: var(--sapSlider_RangeHandleBackground);
 	--_ui5_range_slider_root_hover_handle_bg: var(--sapButton_Hover_Background);
 	--_ui5_range_slider_handle_active_background: var(--sapSlider_Active_RangeHandleBackground);
-	--_ui5_slider_inner_height: 0.25rem;
+	--_ui5_slider_inner_height: 0.375rem;
 	--_ui5_slider_progress_border_radius: 0.25rem;
 	--_ui5_slider_progress_background: var(--sapSlider_Selected_Background);
 	--_ui5_slider_progress_container_background: var(--sapSlider_Background);
@@ -27,25 +27,24 @@
 	--_ui5_slider_progress_after_background: var(--sapContent_MeasureIndicatorColor);
 	--_ui5_slider_progress_after_border: solid 0.0625rem var(--sapContent_Selected_MeasureIndicatorColor);
 	--_ui5_slider_progress_before_border: solid 0.0625rem var(--sapContent_MeasureIndicatorColor);
-	--_ui5_slider_start_end_point_top: -3px;
+	--_ui5_slider_start_end_point_top: -0.1875rem;
 	--_ui5_slider_progress_outline_offset: -14px;
 	--_ui5_slider_outer_height: calc(var(--_ui5_slider_handle_height) + 9px);
 	--_ui5_slider_progress_outline_offset_left: calc(-1 * (var(--_ui5_slider_handle_width) / 2) - 6px);
 	--_ui5_slider_progress_outline: var(--sapContent_FocusWidth) dotted var(--sapContent_FocusColor);
 	--_ui5_range_slider_focus_outline_width: calc(100% + var(--_ui5_slider_handle_width) + 12px);
 	--_ui5_range_slider_focus_outline_radius: .5rem;
 	--_ui5_slider_tickmark_height: .5rem;
-	--_ui5_slider_tickmark_top: -.125rem;
+	--_ui5_slider_tickmark_top: -0.0625rem; /* -(0.5rem tickmark - 0.375rem track) / 2 */
 	--_ui5_slider_progress_box_sizing: border-box;
-	--_ui5_slider_active_progress_box_sizing: border-box;
+	--_ui5_slider_active_progress_box_sizing: content-box;
 
-	--_ui5_slider_progress_container_top: .0625rem;
+	--_ui5_slider_progress_container_top: 0;
 	--_ui5_slider_progress_height: .375rem;
-	--_ui5_slider_active_progress_left: -.0625rem;
-	--_ui5_slider_active_progress_top: -.15625rem;
+	--_ui5_slider_active_progress_border: solid 0.0625rem var(--sapSlider_Selected_BorderColor);
+	--_ui5_slider_active_progress_top: -.0625rem;
 
 	--_ui5_slider_no_tickmarks_progress_container_top: 0;
-	--_ui5_slider_no_tickmarks_progress_height: 100%;
 	--_ui5_slider_no_tickmarks_active_progress_border: none;
 	--_ui5_slider_no_tickmarks_active_progress_left: 0;
 	--_ui5_slider_no_tickmarks_active_progress_top: 0;
@@ -70,6 +69,8 @@
 .ui5-content-density-compact,
 .sapUiSizeCompact {
 	--_ui5_slider_handle_width: 1.5rem;
+	--_ui5_slider_handle_height: 1.25rem;
+	--_ui5_slider_handle_top: -0.5rem;
 	--_ui5_range_slider_focus_outline_width: calc(100% + var(--_ui5_slider_handle_width) + 12px);
 	--_ui5_slider_outer_height: calc(var(--_ui5_slider_handle_height) + 10px);
 	--_ui5_slider_progress_outline_offset: calc((-1 * var(--_ui5_slider_outer_height)) + 1rem);
diff --git a/packages/main/src/themes/sap_horizon_hcw/SliderBase-parameters.css b/packages/main/src/themes/sap_horizon_hcw/SliderBase-parameters.css
diff --git a/packages/main/test/pages/Slider.html b/packages/main/test/pages/Slider.html
diff --git a/packages/main/test/pages/styles/Slider.css b/packages/main/test/pages/styles/Slider.css

Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,7 @@`
`2`	`2`
`3`	`3`	`:root {`
`4`	`4`	`--_ui5_slider_inner_min_width: 4rem;`
	`5`	`+ --_ui5_slider_handle_top: -0.6875rem;`
`5`	`6`	`--_ui5_range_slider_handle_background: transparent;`
`6`	`7`	`--_ui5_range_slider_root_hover_handle_bg: transparent;`
`7`	`8`	`}`