fix(ui5-slider/ui5-range-slider): add border to progress indicator (#12653)

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);

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

@@ -3,7 +3,7 @@
 	--_ui5_slider_progress_container_background: var(--sapField_BorderColor);
 	--_ui5_slider_progress_container_dot_display: none;
 	--_ui5_slider_progress_container_dot_background: var(--sapField_BorderColor);
-	--_ui5_slider_progress_border: none;
+	--_ui5_slider_progress_border: solid 0.0625rem var(--sapSlider_BorderColor);
 	--_ui5_slider_padding: 1.406rem 1.0625rem;
 	--_ui5_slider_inner_height: 0.25rem;
 	--_ui5_slider_outer_height: 1.6875rem;
@@ -63,15 +63,16 @@
 	--_ui5_range_slider_root_active_handle_icon_display: none;
 	--_ui5_slider_tickmark_height: 1rem;
 	--_ui5_slider_tickmark_top: -.3125rem;
-	--_ui5_slider_progress_box_sizing: content-box;
+	--_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_active_progress_border: none;
+	--_ui5_slider_active_progress_border: solid 0.0625rem var(--sapSlider_Selected_BorderColor);
 	--_ui5_slider_active_progress_left: 0;
 	--_ui5_slider_active_progress_top: 0;
 

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

@@ -19,7 +19,6 @@
 	--_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_progress_border: solid 0.0625rem var(--sapContent_MeasureIndicatorColor);
 	--_ui5_slider_progress_border_radius: 0.25rem;
 	--_ui5_slider_progress_background: var(--sapSlider_Selected_Background);
 	--_ui5_slider_progress_container_background: var(--sapSlider_Background);
@@ -38,10 +37,10 @@
 	--_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: .375rem;
-	--_ui5_slider_active_progress_border: .0625rem solid var(--sapSlider_Selected_BorderColor);
 	--_ui5_slider_active_progress_left: -.0625rem;
 	--_ui5_slider_active_progress_top: -.15625rem;
 

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

@@ -19,7 +19,6 @@
 	--_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_progress_border: solid 0.0625rem var(--sapContent_MeasureIndicatorColor);
 	--_ui5_slider_progress_border_radius: 0.25rem;
 	--_ui5_slider_progress_background: var(--sapSlider_Selected_Background);
 	--_ui5_slider_progress_container_background: var(--sapSlider_Background);
@@ -38,10 +37,10 @@
 	--_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: .375rem;
-	--_ui5_slider_active_progress_border: .0625rem solid var(--sapSlider_Selected_BorderColor);
 	--_ui5_slider_active_progress_left: -.0625rem;
 	--_ui5_slider_active_progress_top: -.15625rem;