refactor(ui5-slider): slider handle and scale extraction by MapTo0 · Pull Request #13033 · UI5/webcomponents

MapTo0 · 2026-02-05T14:30:02Z

No description provided.

ui5-webcomponents-bot · 2026-02-05T14:38:03Z

🧹 Preview deployment cleaned up: https://pr-13033--ui5-webcomponents.netlify.app

packages/main/src/SliderTemplate.tsx

ndeshev · 2026-02-12T10:40:19Z

packages/main/src/SliderTemplate.tsx

+				tabIndex={slider.disabled ? -1 : 0}
+				disabled={slider.disabled}
+				aria-orientation="horizontal"
+				part="handle-container"


Previously the part name was just "handle". This will break the apps that already uses it.

ndeshev · 2026-02-12T10:45:15Z

packages/main/src/SliderScale.ts

+	}
+
+	get _tickmarksCount() {
+		return (this.max - this.min) / this.step;


I think it will be good to return if step is 0 to avoid division by 0, in fact, setting the step property to 0 breaks the code in more than one place. in get _allTickmarks() the script throws an exception and at least my browser crashes. I think we should at least avoid uncaught exceptions in case of unwanted property values.

I've added a check but still, application setting step 0 is problem in the application, guarding this would cover potential application bugs.

packages/main/src/SliderScale.ts

ndeshev · 2026-02-12T10:51:01Z

packages/main/src/Slider.ts

-			this.storePropertyState("labelInterval");
-		}
+	_handleResize() {
+		// TODO: Remove after refactoring Base and RangeSlider


ndeshev · 2026-02-12T10:53:30Z

packages/main/src/SliderScale.ts

+		} else {
+			// Calculate if labels would overlap based on their estimated width
+			const visibleLabelCount = Math.ceil((tickmarksCount - 1) / this.labelInterval) + 1;
+			const estimatedLabelWidth = 32; // Estimated width in pixels for a label (2rem = ~32px)


Could we somehow use a CSS var instead of hardcoded number, in case it changes depending on a theme or theme density?

Lets leave such logic for the new responsive scale implementation

niyap

The accessibility part is broken - slider's value is not announced as well as how to increase or decrease the value.
Now, when an invalid value is set, it is not reset anymore. The problem is that that invalid value is set as value of aria-valuenow of the handle and end-value of the scale. If that change is desired, could you please check if it is appropriate from accessibility perspective
According to the UX specification, the first and the last label should always be visible. In such case, what should happen, if you have the following situation: on the test page, slider with id="slider-tickmarks-labels" enhance with step="3" and label-interval="2" -> the last visible one is 16 as it is the last available in the predefined range. Should we visualised 20 at the end as the end of the interval or leave it without label as there is next valid one in out of range.
Tooltips and inputs values are not updated correctly if you just click somewhere over a tickmark of the slider. Works as expected if you drag the handle.
If you set min value greater than the max one, the slider is broken at all. Labels and tickmarks are not rendered. Handle cound not be dragged, tooltip is not updated and etc. Do you know what should we do in such case, I am not sure if it a valid one but if not, we can add some documentation/note about that
In the documentation we state that if the step is equal to 0, slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value. -> currently if you set the step to 0, the slider is even not rendered and а console error is logged. Please, also check when the step value has been changed programmatically.
If you have editable tooltip and you change its value to a invalid one -> value state is changed to error, then you update it again with a valid one and press Enter, the handle is moved to the correct point of the slider, the tooltip now shows a valid value, but the value state is not updated, still remains error. Even on focusout, if you hover over the handle, you will notice that it is still invalid
In RTL mode, the end dot is placed at the beginning and has blue color.

niyap · 2026-02-13T21:22:41Z

packages/main/src/Slider.ts

 	 *
 	 */
 	onBeforeRendering() {
-		if (!this.isCurrentStateOutdated()) {


Please, update the documentation as it describes the deleted logic.

packages/main/cypress/specs/Slider.cy.tsx

niyap · 2026-02-16T07:49:47Z

packages/main/cypress/specs/Slider.cy.tsx

-			.and('have.length', 6);
-	});
-
-	it("If the min and max properties are changed, the tickmarks and labels must be updated also.", () => {


This one as well

packages/main/src/Slider.ts

packages/main/src/SliderHandle.ts

niyap · 2026-02-16T14:59:59Z

packages/main/src/SliderScale.ts

+			const visibleLabelCount = Math.ceil((tickmarksCount - 1) / this.labelInterval) + 1;
+			const estimatedLabelWidth = 32; // Estimated width in pixels for a label (2rem = ~32px)
+			const requiredWidth = visibleLabelCount * estimatedLabelWidth;
+			this._labelsOverlapping = containerSize < requiredWidth;


If you have a slider with labels and tickmarks and you update the step programmatically, the labels are not rendered correctly. The last one is not visualised where it should always be. I tested on "Slider with steps, input tooltips, tickmarks and labels" sample, changing the step value on change

We agreed that it should be handled with the responsive scale implementaion

packages/main/src/SliderScale.ts

packages/main/src/SliderTemplate.tsx

packages/main/src/Slider.ts

packages/main/src/themes/Slider.css

packages/main/src/themes/sap_horizon/Slider-parameters.css

packages/main/src/themes/Slider.css

packages/main/src/themes/SliderScale.css

packages/main/src/themes/SliderHandle.css

packages/main/src/themes/SliderScale.css

packages/main/src/themes/sap_fiori_3/SliderScale-parameters.css

packages/main/src/themes/sap_fiori_3_dark/SliderScale-parameters.css

packages/main/src/themes/sap_fiori_3_hcb/SliderScale-parameters.css

packages/main/src/themes/sap_fiori_3_hcw/SliderScale-parameters.css

packages/main/src/themes/SliderScale.css

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

MapTo0 · 2026-02-19T14:44:15Z

packages/main/cypress/specs/ColorPicker.cy.tsx


 		cy.get<ColorPicker>("@colorPicker")
-			.should("have.value", "rgba(64, 191, 189, 1)");
+			.should("have.value", "rgba(64, 191, 191, 1)");


@tsanislavgatev I believe this test used to be wrong? Could you please confirm? the Slider' value is now correct from 0 to 360, clicking center should count as value 180

I wouldn't say wrong, but testing on the current slider behaviour. Both colors are almost identical. They resolve to #40bfbf and #40bfbd which doesn't really have a noticable difference. The change in the test is okay, but I would say it just tests the behaviour of the component based on the behaviour of the slider.

niyap

I found another accessibility issue:
Previously, when an editable tootltip is presented and the slider handle receives focus, the announcement include: "Press F2 to enter a value", after the enhancements that information is not announced anymore.
SliderBase.ts -> please update step property documentation, as it is written: "When negative number or value other than a number, the component fallbacks to its default value." which is not expected anymore. Check whether there is something similar for the other properties as well and if so, please remove it.
Editable tooltip - delete its value -> focusout -> on hover over the handle it remains empty, on focus over the handle, still empty.

packages/main/src/themes/Slider.css

niyap · 2026-02-23T12:13:40Z

packages/main/src/SliderScale.ts

+			const visibleLabelCount = Math.ceil((tickmarksCount - 1) / this.labelInterval) + 1;
+			const estimatedLabelWidth = 32; // Estimated width in pixels for a label (2rem = ~32px)
+			const requiredWidth = visibleLabelCount * estimatedLabelWidth;
+			this._labelsOverlapping = containerSize < requiredWidth;


We agreed that it should be handled with the responsive scale implementaion

refactor(ui5-slider): slider handle extraction

160781b

MapTo0 changed the title ~~refactor(ui5-slider): slider handle extraction~~ refactor(ui5-slider): slider handle and scale extraction Feb 5, 2026

MapTo0 requested review from ndeshev and niyap February 5, 2026 14:30

ui5-webcomponents-bot temporarily deployed to preview February 5, 2026 14:38 Inactive

Merge branch 'main' into slider-refactoring-2

fe25fa2

ui5-webcomponents-bot temporarily deployed to preview February 9, 2026 08:53 Inactive

ndeshev reviewed Feb 12, 2026

View reviewed changes

niyap reviewed Feb 16, 2026

View reviewed changes

niyap reviewed Feb 17, 2026

View reviewed changes

packages/main/src/themes/SliderScale.css Show resolved Hide resolved

packages/main/src/themes/sap_horizon_hcb/SliderHandle-parameters.css Show resolved Hide resolved

fix: review feedback applied

be21665

ui5-webcomponents-bot temporarily deployed to preview February 18, 2026 22:19 Inactive

fix: review feedback applied

0514538

ui5-webcomponents-bot temporarily deployed to preview February 19, 2026 14:30 Inactive

fix: colorpicker test

a16f7f3

MapTo0 commented Feb 19, 2026

View reviewed changes

ui5-webcomponents-bot temporarily deployed to preview February 19, 2026 14:49 Inactive

niyap reviewed Feb 23, 2026

View reviewed changes

MapTo0 added 2 commits February 23, 2026 22:45

fix: review feedback

3c8ee77

Merge remote-tracking branch 'origin/main' into HEAD

30e04ac

ui5-webcomponents-bot temporarily deployed to preview February 23, 2026 20:52 Inactive

niyap approved these changes Feb 25, 2026

View reviewed changes

MapTo0 merged commit 056a123 into main Feb 25, 2026
14 checks passed

MapTo0 deleted the slider-refactoring-2 branch February 25, 2026 15:02

ui5-webcomponents-bot deployed to preview February 25, 2026 15:03 View deployment

Comments

Conversation

MapTo0 commented Feb 5, 2026

Uh oh!

ui5-webcomponents-bot commented Feb 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ndeshev Feb 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

niyap left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

niyap left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

ui5-webcomponents-bot commented Feb 5, 2026 •

edited

Loading

ndeshev Feb 12, 2026 •

edited

Loading

niyap left a comment •

edited

Loading