fix(ui5-slider/ui5-range-slider): implement vd spec

Author: StefanDimitrov04

packages/main/src/themes/SliderBase.css

@@ -72,7 +72,7 @@
 	height: var(--_ui5_slider_progress_height);
 	position: relative;
 	outline: none;
-	box-sizing: border-box;
+	box-sizing: var(--_ui5_slider_active_progress_box_sizing);
 	border: var(--_ui5_slider_active_progress_border);
 	left: var(--_ui5_slider_active_progress_left);
 	top: var(--_ui5_slider_active_progress_top);
@@ -84,7 +84,7 @@
 	margin: 0;
 	top: var(--_ui5_slider_tickmark_top);
 	display: flex;
-	box-sizing: content-box;
+	box-sizing: border-box;
 	width: 100%;
 	justify-content: space-between;
 	position: absolute;

packages/main/src/themes/base/SliderBase-parameters.css

@@ -64,6 +64,7 @@
 	--_ui5_slider_tickmark_height: 1rem;
 	--_ui5_slider_tickmark_top: -.3125rem;
 	--_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;

packages/main/src/themes/sap_horizon_hcb/SliderBase-parameters.css

@@ -18,7 +18,7 @@
 	--_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.375rem;
+	--_ui5_slider_inner_height: 0.25rem;
 	--_ui5_slider_progress_border_radius: 0.25rem;
 	--_ui5_slider_progress_background: var(--sapSlider_Selected_Background);
 	--_ui5_slider_progress_container_background: var(--sapSlider_Background);
@@ -37,10 +37,12 @@
 	--_ui5_slider_tickmark_height: .5rem;
 	--_ui5_slider_tickmark_top: -.125rem;
 	--_ui5_slider_progress_box_sizing: border-box;
+	--_ui5_slider_active_progress_box_sizing: border-box;
 
 	--_ui5_slider_progress_container_top: .0625rem;
-	--_ui5_slider_progress_height: .25rem;
+	--_ui5_slider_progress_height: .375rem;
 	--_ui5_slider_active_progress_left: -.0625rem;
+	--_ui5_slider_active_progress_top: -.15625rem;
 
 	--_ui5_slider_no_tickmarks_progress_container_top: 0;
 	--_ui5_slider_no_tickmarks_progress_height: 100%;

packages/main/src/themes/sap_horizon_hcw/SliderBase-parameters.css

@@ -18,7 +18,7 @@
 	--_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.375rem;
+	--_ui5_slider_inner_height: 0.25rem;
 	--_ui5_slider_progress_border_radius: 0.25rem;
 	--_ui5_slider_progress_background: var(--sapSlider_Selected_Background);
 	--_ui5_slider_progress_container_background: var(--sapSlider_Background);
@@ -37,10 +37,12 @@
 	--_ui5_slider_tickmark_height: .5rem;
 	--_ui5_slider_tickmark_top: -.125rem;
 	--_ui5_slider_progress_box_sizing: border-box;
+	--_ui5_slider_active_progress_box_sizing: border-box;
 
 	--_ui5_slider_progress_container_top: .0625rem;
-	--_ui5_slider_progress_height: .25rem;
+	--_ui5_slider_progress_height: .375rem;
 	--_ui5_slider_active_progress_left: -.0625rem;
+	--_ui5_slider_active_progress_top: -.15625rem;
 
 	--_ui5_slider_no_tickmarks_progress_container_top: 0;
 	--_ui5_slider_no_tickmarks_progress_height: 100%;