Skip to content

Commit 3855d37

Browse files
aleksandar-terzievaleksandar-terziev
committed
fix(ui5-slider): align slider to the spec
1 parent 1ef07be commit 3855d37

19 files changed

Lines changed: 273 additions & 163 deletions

‎packages/main/src/Slider.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -370,8 +370,8 @@ class Slider extends SliderBase implements IFormInputElement {
370370
get styles() {
371371
return {
372372
progress: {
373-
"transform": `scaleX(${this._progressPercentage})`,
374-
"transform-origin": `${this.directionStart} top`,
373+
"width": `${this._handlePositionFromStart}%`,
374+
"border": this._handlePositionFromStart === 0 ? "none" : "",
375375
},
376376
handle: {
377377
[this.directionStart]: `${this._handlePositionFromStart}%`,

‎packages/main/src/themes/SliderBase.css‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919

2020
.ui5-slider-root {
2121
box-sizing: border-box;
22-
height: 3.3125rem;
22+
height: var(--_ui5_slider_root_height);
2323
outline: none;
2424
padding: var(--_ui5_slider_padding);
2525
touch-action: none;
@@ -68,13 +68,13 @@
6868

6969
.ui5-slider-progress {
7070
background: var(--_ui5_slider_progress_background);
71-
border-radius: var(--_ui5_slider_progress_border_radius);
72-
height: var(--_ui5_slider_progress_height);
73-
position: relative;
71+
border-radius: var(--_ui5_slider_active_progress_border_radius);
72+
height: var(--_ui5_slider_active_progress_height);
73+
position: absolute;
7474
outline: none;
75-
box-sizing: var(--_ui5_slider_active_progress_box_sizing);
75+
box-sizing: content-box;
7676
border: var(--_ui5_slider_active_progress_border);
77-
left: var(--_ui5_slider_active_progress_left);
77+
inset-inline-start: var(--_ui5_slider_active_progress_left);
7878
top: var(--_ui5_slider_active_progress_top);
7979
}
8080

@@ -247,9 +247,9 @@
247247
}
248248

249249
:host([show-tickmarks]) .ui5-slider-progress {
250-
height: var(--_ui5_slider_no_tickmarks_progress_height);
250+
height: var(--_ui5_slider_no_tickmarks_active_progress_height);
251251
border: var(--_ui5_slider_no_tickmarks_active_progress_border);
252-
left: var(--_ui5_slider_no_tickmarks_active_progress_left);
252+
inset-inline-start: var(--_ui5_slider_no_tickmarks_active_progress_left);
253253
top: var(--_ui5_slider_no_tickmarks_active_progress_top);
254254
}
255255

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

Lines changed: 35 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,29 @@
33
--_ui5_slider_progress_container_background: var(--sapField_BorderColor);
44
--_ui5_slider_progress_container_dot_display: none;
55
--_ui5_slider_progress_container_dot_background: var(--sapField_BorderColor);
6-
--_ui5_slider_progress_border: solid 0.0625rem var(--sapSlider_BorderColor);
6+
--_ui5_slider_progress_border_width: 0.0625rem;
7+
--_ui5_slider_progress_border: solid var(--_ui5_slider_progress_border_width) var(--sapSlider_BorderColor);
8+
--_ui5_slider_progress_before_background: transparent;
9+
--_ui5_slider_progress_after_background: transparent;
10+
--_ui5_slider_progress_before_border: none;
11+
--_ui5_slider_progress_after_border: none;
712
--_ui5_slider_padding: 1.406rem 1.0625rem;
13+
--_ui5_slider_root_height: 2.75rem;
814
--_ui5_slider_inner_height: 0.25rem;
15+
--_ui5_slider_inner_min_width: 4rem;
916
--_ui5_slider_outer_height: 1.6875rem;
1017
--_ui5_slider_progress_border_radius: 0.25rem;
1118
--_ui5_slider_progress_background: var(--sapActiveColor);
1219
--_ui5_slider_handle_icon_display: none;
1320
--_ui5_range_slider_root_hover_handle_icon_display: none;
14-
--_ui5_slider_handle_height: 1.625rem;
15-
--_ui5_slider_handle_width: 1.625rem;
16-
--_ui5_slider_handle_border: solid 0.125rem var(--sapField_BorderColor);
17-
--_ui5_slider_handle_border_radius: 1rem;
21+
--_ui5_slider_handle_height: 1.5rem;
22+
--_ui5_slider_handle_width: 2rem;
23+
--_ui5_slider_handle_border: 0.0625rem solid var(--sapField_BorderColor);
24+
--_ui5_slider_handle_border_radius: 0.5rem;
1825
--_ui5_slider_handle_background: var(--sapButton_Background);
1926
--_ui5_range_slider_handle_background: #FFF;
20-
--_ui5_slider_handle_top: -0.825rem;
27+
--_ui5_slider_track_total_height: calc(var(--_ui5_slider_inner_height) + (2 * var(--_ui5_slider_progress_border_width)));
28+
--_ui5_slider_handle_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_handle_height)) / 2 - var(--_ui5_slider_progress_border_width));
2129
--_ui5_slider_tickmark_bg: var(--sapField_BorderColor);
2230
--_ui5_slider_tickmark_in_range_bg: var(--sapButton_Active_Background);
2331
--_ui5_slider_handle_hover_background: var(--sapButton_Hover_Background);
@@ -27,7 +35,7 @@
2735
--_ui5_slider_handle_outline_offset: 0.075rem;
2836
--_ui5_slider_progress_outline: 0.0625rem dotted var(--sapContent_FocusColor);
2937
--_ui5_slider_progress_outline_offset: -0.8125rem;
30-
--_ui5_slider_tickmark_top: -0.375rem;
38+
--_ui5_slider_tickmark_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_tickmark_height)) / 2 - var(--_ui5_slider_progress_border_width));
3139
--_ui5_slider_disabled_opacity: 0.4;
3240
--_ui5_slider_tooltip_fontsize: var(--sapFontSmallSize);
3341
--_ui5_slider_tooltip_color: var(--sapContent_LabelColor);
@@ -49,9 +57,9 @@
4957
--_ui5_range_slider_progress_focus_height: 2rem;
5058
--_ui5_range_slider_legacy_progress_focus_display: block;
5159
--_ui5_slider_handle_focus_width: 0;
52-
--_ui5_slider_start_end_point_size: .375rem;
53-
--_ui5_slider_start_end_point_left: -0.875rem;
54-
--_ui5_slider_start_end_point_top: -.1875rem;
60+
--_ui5_slider_start_end_point_size: 0.5rem;
61+
--_ui5_slider_start_end_point_left: -.95rem;
62+
--_ui5_slider_start_end_point_top: -0.1875rem;
5563
--_ui5_slider_handle_background_focus: var(--sapButton_Active_Background);
5664
--_ui5_slider_handle_focused_tooltip_distance: var(--_ui5_slider_tooltip_bottom);
5765
--_ui5_slider_handle_box_sizing: content-box;
@@ -61,33 +69,40 @@
6169
--_ui5_range_slider_handle_background_focus: transparent;
6270
--_ui5_range_slider_progress_focus_width: 100%;
6371
--_ui5_range_slider_root_active_handle_icon_display: none;
64-
--_ui5_slider_tickmark_height: 1rem;
65-
--_ui5_slider_tickmark_top: -.3125rem;
72+
--_ui5_slider_tickmark_height: 0.5rem;
6673
--_ui5_slider_progress_box_sizing: border-box;
6774
--_ui5_slider_active_progress_box_sizing: content-box;
68-
--_ui5_slider_tickmark_in_range_bg: var(--sapField_BorderColor);
6975
--_ui5_range_slider_focus_outline_width: 100%;
7076
--_ui5_slider_progress_outline_offset_left: 0;
7177
--_ui5_range_slider_focus_outline_radius: 0;
7278

7379
--_ui5_slider_progress_container_top: 0;
74-
--_ui5_slider_progress_height: 100%;
80+
--_ui5_slider_progress_height: 0.25rem;
7581
--_ui5_slider_active_progress_border: solid 0.0625rem var(--sapSlider_Selected_BorderColor);
76-
--_ui5_slider_active_progress_left: 0;
77-
--_ui5_slider_active_progress_top: 0;
82+
--_ui5_slider_active_progress_border_radius: 0.25rem;
83+
--_ui5_slider_active_progress_left: -0.0625rem;
84+
--_ui5_slider_active_progress_top: -0.0625rem;
85+
--_ui5_slider_active_progress_padding: 0.125rem;
86+
--_ui5_slider_active_progress_height: calc(var(--_ui5_slider_progress_height) - 0.125rem);
7887

7988
--_ui5_slider_no_tickmarks_progress_container_top: var(--_ui5_slider_progress_container_top);
8089
--_ui5_slider_no_tickmarks_progress_height: var(--_ui5_slider_progress_height);
8190
--_ui5_slider_no_tickmarks_active_progress_border: var(--_ui5_slider_active_progress_border);
82-
--_ui5_slider_no_tickmarks_active_progress_left: var(--_ui5_slider_active_progress_left);
83-
--_ui5_slider_no_tickmarks_active_progress_top: var(--_ui5_slider_active_progress_top);
91+
--_ui5_slider_no_tickmarks_active_progress_left: -0.0625rem;
92+
--_ui5_slider_no_tickmarks_active_progress_top: -0.0625rem;
93+
--_ui5_slider_no_tickmarks_active_progress_height: calc(var(--_ui5_slider_no_tickmarks_progress_height) - 0.125rem);
8494
--_ui5_slider_handle_focus_visibility: none;
85-
--_ui5_slider_handle_icon_size: 1rem;
95+
--_ui5_slider_handle_icon_size: 0.875rem;
8696
}
8797

8898
[data-ui5-compact-size],
8999
.ui5-content-density-compact,
90100
.sapUiSizeCompact {
91-
--_ui5_slider_handle_icon_size: .875rem;
101+
--_ui5_slider_start_end_point_left: -0.7rem;
102+
--_ui5_slider_handle_icon_size: 0.875rem;
92103
--_ui5_slider_padding: 1rem 1.0625rem;
104+
--_ui5_slider_root_height: 2rem;
105+
--_ui5_slider_handle_height: 1.25rem;
106+
--_ui5_slider_handle_width: 1.5rem;
107+
--_ui5_slider_handle_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_handle_height)) / 2 - var(--_ui5_slider_progress_border_width));
93108
}

‎packages/main/src/themes/base/sizes-parameters.css‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -323,9 +323,7 @@
323323
--_ui5-responsive_popover_header_height: 2.5rem;
324324

325325
/* Slider */
326-
--_ui5_slider_handle_height: 1.25rem;
327326
--_ui5_slider_handle_width: 1.5rem;
328-
--_ui5_slider_handle_top: -.5rem;
329327
--_ui5_slider_tooltip_height: 1rem;
330328
--_ui5_slider_tooltip_padding: 0.25rem;
331329
/* --_ui5_slider_tooltip_bottom: 1.875rem; */

‎packages/main/src/themes/sap_fiori_3/SliderBase-parameters.css‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
:root {
44
--_ui5_slider_inner_min_width: 4rem;
55
--_ui5_range_slider_handle_background_focus: transparent;
6-
--_ui5_slider_handle_top: -.875rem;
6+
--_ui5_slider_track_total_height: var(--_ui5_slider_inner_height);
77
--_ui5_range_slider_handle_background: transparent;
88
--_ui5_range_slider_handle_active_background: transparent;
99
--_ui5_slider_handle_background: var(--sapButton_Background);
@@ -12,13 +12,20 @@
1212
--_ui5_range_slider_root_active_handle_icon_display: none;
1313
--_ui5_slider_handle_width: 1.875rem;
1414
--_ui5_slider_handle_height: 1.875rem;
15+
--_ui5_slider_handle_border: 0.125rem solid var(--sapField_BorderColor);
16+
--_ui5_slider_handle_border_radius: 1rem;
17+
--_ui5_slider_handle_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_handle_height)) / 2);
1518
--_ui5_slider_handle_box_sizing: border-box;
16-
--_ui5_slider_tickmark_top: -.34375rem;
19+
--_ui5_slider_tickmark_height: 1rem;
20+
--_ui5_slider_tickmark_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_tickmark_height)) / 2);
1721
}
1822

1923
[data-ui5-compact-size],
2024
.ui5-content-density-compact,
2125
.sapUiSizeCompact {
22-
--_ui5_slider_handle_width: 1.25rem;
23-
--_ui5_slider_handle_height: 1.25rem;
26+
--_ui5_slider_handle_width: 1.5rem;
27+
--_ui5_slider_handle_height: 1.5rem;
28+
--_ui5_slider_handle_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_handle_height)) / 2);
29+
--_ui5_slider_tickmark_height: 0.75rem;
30+
--_ui5_slider_tickmark_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_tickmark_height)) / 2);
2431
}

‎packages/main/src/themes/sap_fiori_3/sizes-parameters.css‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,4 @@
1313
.sapUiSizeCompact {
1414
/* ColorPicker */
1515
--_ui5_color_picker_slider_handle_container_margin_top: none;
16-
17-
/* Slider, Range Slider */
18-
--_ui5_slider_handle_width: 1.25rem;
19-
--_ui5_slider_handle_height: 1.25rem;
2016
}

‎packages/main/src/themes/sap_fiori_3_dark/SliderBase-parameters.css‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,25 @@
22

33
:root {
44
--_ui5_slider_inner_min_width: 4rem;
5+
--_ui5_slider_track_total_height: var(--_ui5_slider_inner_height);
56
--_ui5_range_slider_handle_background: transparent;
67
--_ui5_range_slider_root_hover_handle_bg: transparent;
8+
--_ui5_slider_handle_width: 1.875rem;
9+
--_ui5_slider_handle_height: 1.875rem;
10+
--_ui5_slider_handle_border: 0.125rem solid var(--sapField_BorderColor);
11+
--_ui5_slider_handle_border_radius: 1rem;
12+
--_ui5_slider_handle_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_handle_height)) / 2);
13+
--_ui5_slider_handle_box_sizing: border-box;
14+
--_ui5_slider_tickmark_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_tickmark_height)) / 2);
15+
--_ui5_slider_tickmark_height: 1rem;
716
}
817

918
[data-ui5-compact-size],
1019
.ui5-content-density-compact,
1120
.sapUiSizeCompact {
12-
--_ui5_slider_handle_width: 1.25rem;
13-
--_ui5_slider_handle_height: 1.25rem;
21+
--_ui5_slider_handle_width: 1.5rem;
22+
--_ui5_slider_handle_height: 1.5rem;
23+
--_ui5_slider_handle_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_handle_height)) / 2);
24+
--_ui5_slider_tickmark_height: 0.75rem;
25+
--_ui5_slider_tickmark_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_tickmark_height)) / 2);
1426
}

‎packages/main/src/themes/sap_fiori_3_dark/sizes-parameters.css‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,4 @@
1313
.sapUiSizeCompact {
1414
/* ColorPicker */
1515
--_ui5_color_picker_slider_handle_container_margin_top: none;
16-
17-
/* Slider, Range Slider */
18-
--_ui5_slider_handle_width: 1.25rem;
19-
--_ui5_slider_handle_height: 1.25rem;
2016
}

‎packages/main/src/themes/sap_fiori_3_hcb/SliderBase-parameters.css‎

Lines changed: 30 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,39 @@
11
@import "../base/SliderBase-parameters.css";
22

33
:root {
4-
--_ui5_slider_inner_height: 0.375rem;
4+
--_ui5_slider_inner_height: 0.375rem; /* Total height including border */
5+
--_ui5_slider_track_total_height: var(--_ui5_slider_inner_height);
6+
--_ui5_slider_progress_box_sizing: border-box;
57
--_ui5_slider_progress_border: solid 0.0625rem var(--sapField_BorderColor);
68
--_ui5_slider_progress_border_radius: 0.375rem;
79
--_ui5_range_slider_handle_background: transparent;
810
--_ui5_slider_handle_hover_background: var(--sapButton_Hover_Background);
9-
--_ui5_slider_handle_border: solid 0.125rem var(--sapField_BorderColor);
10-
--_ui5_slider_handle_height: 1.65rem;
11-
--_ui5_slider_handle_width: 1.65rem;
12-
--_ui5_slider_handle_top: -0.75rem;
11+
--_ui5_slider_handle_width: 1.875rem;
12+
--_ui5_slider_handle_height: 1.875rem;
13+
--_ui5_slider_handle_border: 0.125rem solid var(--sapField_BorderColor);
14+
--_ui5_slider_handle_border_radius: 1rem;
15+
--_ui5_slider_handle_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_handle_height)) / 2);
16+
--_ui5_slider_handle_box_sizing: border-box;
1317
--_ui5_slider_progress_background: var(--sapSelectedColor);
14-
--_ui5_slider_tickmark_top: -0.2525rem;
18+
--_ui5_slider_tickmark_height: 1rem;
19+
--_ui5_slider_tickmark_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_tickmark_height)) / 2);
20+
--_ui5_slider_active_progress_border: none;
21+
--_ui5_slider_active_progress_left: 0;
22+
--_ui5_slider_active_progress_top: 0;
23+
--_ui5_slider_active_progress_height: var(--_ui5_slider_progress_height);
24+
--_ui5_slider_no_tickmarks_active_progress_border: none;
25+
--_ui5_slider_no_tickmarks_active_progress_left: 0;
26+
--_ui5_slider_no_tickmarks_active_progress_top: 0;
27+
--_ui5_slider_no_tickmarks_active_progress_height: var(--_ui5_slider_no_tickmarks_progress_height);
28+
}
29+
30+
[data-ui5-compact-size],
31+
.ui5-content-density-compact,
32+
.sapUiSizeCompact {
33+
--_ui5_slider_handle_width: 1.5rem;
34+
--_ui5_slider_handle_height: 1.5rem;
35+
--_ui5_slider_handle_border_radius: 1rem;
36+
--_ui5_slider_handle_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_handle_height)) / 2);
37+
--_ui5_slider_tickmark_height: 0.75rem;
38+
--_ui5_slider_tickmark_top: calc((var(--_ui5_slider_track_total_height) - var(--_ui5_slider_tickmark_height)) / 2);
1539
}

‎packages/main/src/themes/sap_fiori_3_hcb/sizes-parameters.css‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
11
@import "../base/sizes-parameters.css";
22
:root {
3-
/* Slider, Range Slider */
4-
--_ui5_slider_handle_width: 1.25rem;
5-
--_ui5_slider_handle_height: 1.25rem;
6-
--_ui5_slider_handle_top: -0.5rem;
7-
83
/* ColorPicker */
94
--_ui5_color_picker_slider_handle_container_margin_top: -0.125rem;
105
}

0 commit comments

Comments
 (0)