From a3bf50862e9a8411031cc2bd638a59de1243f0f2 Mon Sep 17 00:00:00 2001 From: Stefan Dimitrov Date: Mon, 10 Nov 2025 15:33:29 +0200 Subject: [PATCH 1/3] chore(ui5-slider/ui5-range-slider): add border to progress indicator --- packages/main/src/themes/base/SliderBase-parameters.css | 4 ++-- .../main/src/themes/sap_horizon_hcb/SliderBase-parameters.css | 2 -- .../main/src/themes/sap_horizon_hcw/SliderBase-parameters.css | 2 -- 3 files changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/main/src/themes/base/SliderBase-parameters.css b/packages/main/src/themes/base/SliderBase-parameters.css index 2088a51d700f..fe48c46ed49e 100644 --- a/packages/main/src/themes/base/SliderBase-parameters.css +++ b/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; @@ -71,7 +71,7 @@ --_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; diff --git a/packages/main/src/themes/sap_horizon_hcb/SliderBase-parameters.css b/packages/main/src/themes/sap_horizon_hcb/SliderBase-parameters.css index 8fa79db76b4a..c8c5cee757d0 100644 --- a/packages/main/src/themes/sap_horizon_hcb/SliderBase-parameters.css +++ b/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); @@ -41,7 +40,6 @@ --_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; diff --git a/packages/main/src/themes/sap_horizon_hcw/SliderBase-parameters.css b/packages/main/src/themes/sap_horizon_hcw/SliderBase-parameters.css index f76e67e9e48c..e668d2712aec 100644 --- a/packages/main/src/themes/sap_horizon_hcw/SliderBase-parameters.css +++ b/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); @@ -41,7 +40,6 @@ --_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; From f617c9dd1bc19b278acde6477451cb093d2be69d Mon Sep 17 00:00:00 2001 From: Stefan Dimitrov Date: Tue, 11 Nov 2025 13:01:37 +0200 Subject: [PATCH 2/3] fix(ui5-slider/ui5-range-slider): resolve comments --- packages/main/src/themes/SliderBase.css | 2 +- packages/main/src/themes/base/SliderBase-parameters.css | 2 +- .../src/themes/sap_horizon_hcb/SliderBase-parameters.css | 5 ++--- .../src/themes/sap_horizon_hcw/SliderBase-parameters.css | 5 ++--- 4 files changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/main/src/themes/SliderBase.css b/packages/main/src/themes/SliderBase.css index 6c7844ad408f..29c1d0c40bab 100644 --- a/packages/main/src/themes/SliderBase.css +++ b/packages/main/src/themes/SliderBase.css @@ -84,7 +84,7 @@ margin: 0; top: var(--_ui5_slider_tickmark_top); display: flex; - box-sizing: border-box; + box-sizing: content-box; width: 100%; justify-content: space-between; position: absolute; diff --git a/packages/main/src/themes/base/SliderBase-parameters.css b/packages/main/src/themes/base/SliderBase-parameters.css index fe48c46ed49e..2ef6cac2d2a9 100644 --- a/packages/main/src/themes/base/SliderBase-parameters.css +++ b/packages/main/src/themes/base/SliderBase-parameters.css @@ -63,7 +63,7 @@ --_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_tickmark_in_range_bg: var(--sapField_BorderColor); --_ui5_range_slider_focus_outline_width: 100%; --_ui5_slider_progress_outline_offset_left: 0; diff --git a/packages/main/src/themes/sap_horizon_hcb/SliderBase-parameters.css b/packages/main/src/themes/sap_horizon_hcb/SliderBase-parameters.css index c8c5cee757d0..1a93539b5fa2 100644 --- a/packages/main/src/themes/sap_horizon_hcb/SliderBase-parameters.css +++ b/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.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); @@ -39,9 +39,8 @@ --_ui5_slider_progress_box_sizing: border-box; --_ui5_slider_progress_container_top: .0625rem; - --_ui5_slider_progress_height: .375rem; + --_ui5_slider_progress_height: .25rem; --_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%; diff --git a/packages/main/src/themes/sap_horizon_hcw/SliderBase-parameters.css b/packages/main/src/themes/sap_horizon_hcw/SliderBase-parameters.css index e668d2712aec..6f119b448a55 100644 --- a/packages/main/src/themes/sap_horizon_hcw/SliderBase-parameters.css +++ b/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.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); @@ -39,9 +39,8 @@ --_ui5_slider_progress_box_sizing: border-box; --_ui5_slider_progress_container_top: .0625rem; - --_ui5_slider_progress_height: .375rem; + --_ui5_slider_progress_height: .25rem; --_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%; From f7792c21f3854cb58932e39985849ee8882f7092 Mon Sep 17 00:00:00 2001 From: Stefan Dimitrov Date: Tue, 11 Nov 2025 14:18:10 +0200 Subject: [PATCH 3/3] fix(ui5-slider/ui5-range-slider): implement vd spec --- packages/main/src/themes/SliderBase.css | 4 ++-- packages/main/src/themes/base/SliderBase-parameters.css | 1 + .../src/themes/sap_horizon_hcb/SliderBase-parameters.css | 6 ++++-- .../src/themes/sap_horizon_hcw/SliderBase-parameters.css | 6 ++++-- 4 files changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/main/src/themes/SliderBase.css b/packages/main/src/themes/SliderBase.css index 29c1d0c40bab..1649fabe8dc1 100644 --- a/packages/main/src/themes/SliderBase.css +++ b/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; diff --git a/packages/main/src/themes/base/SliderBase-parameters.css b/packages/main/src/themes/base/SliderBase-parameters.css index 2ef6cac2d2a9..02c7760224f2 100644 --- a/packages/main/src/themes/base/SliderBase-parameters.css +++ b/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; diff --git a/packages/main/src/themes/sap_horizon_hcb/SliderBase-parameters.css b/packages/main/src/themes/sap_horizon_hcb/SliderBase-parameters.css index 1a93539b5fa2..1b175ec2c10b 100644 --- a/packages/main/src/themes/sap_horizon_hcb/SliderBase-parameters.css +++ b/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%; diff --git a/packages/main/src/themes/sap_horizon_hcw/SliderBase-parameters.css b/packages/main/src/themes/sap_horizon_hcw/SliderBase-parameters.css index 6f119b448a55..75ed72d05557 100644 --- a/packages/main/src/themes/sap_horizon_hcw/SliderBase-parameters.css +++ b/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%;