refactor(ui5-slider): slider handle and scale extraction#13033
Open
refactor(ui5-slider): slider handle and scale extraction#13033
Conversation
MapTo0
changed the title
Collaborator
|
🚀 Deployed on https://pr-13033--ui5-webcomponents-preview.netlify.app |
ndeshev
reviewed
Feb 12, 2026
| disabled={slider.disabled} | ||
| aria-orientation="horizontal" | ||
| part="handle-container" | ||
| aria-valuemin={slider.min} |
Contributor
There was a problem hiding this comment.
Why there is no longer role="slider" accessibility attribute?
| tabIndex={slider.disabled ? -1 : 0} | ||
| disabled={slider.disabled} | ||
| aria-orientation="horizontal" | ||
| part="handle-container" |
Contributor
There was a problem hiding this comment.
Previously the part name was just "handle". This will break the apps that already uses it.
| } | ||
|
|
||
| get _tickmarksCount() { | ||
| return (this.max - this.min) / this.step; |
Contributor
There was a problem hiding this comment.
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.
| @property({ type: Number }) | ||
| min = 0; | ||
|
|
||
| @property({ type: Number }) |
Contributor
There was a problem hiding this comment.
We should document these props at least a little bit :) You've done it in SliderHandle.ts
| this.storePropertyState("labelInterval"); | ||
| } | ||
| _handleResize() { | ||
| // TODO: Remove after refactoring Base and RangeSlider |
| } 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) |
Contributor
There was a problem hiding this comment.
Could we somehow use a CSS var instead of hardcoded number, in case it changes depending on a theme or theme density?
niyap
reviewed
Feb 16, 2026
Contributor
There was a problem hiding this comment.
- 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.
| * | ||
| */ | ||
| onBeforeRendering() { | ||
| if (!this.isCurrentStateOutdated()) { |
Contributor
There was a problem hiding this comment.
Please, update the documentation as it describes the deleted logic.
| cy.get("@slider").should("have.value", 1, "The current value should be 'stepified' by 7"); | ||
| }); | ||
|
|
||
| it("If the step property or the labelInterval are changed, the tickmarks and labels must be updated also", () => { |
Contributor
There was a problem hiding this comment.
Isn't it good to have such a test?
| .and('have.length', 6); | ||
| }); | ||
|
|
||
| it("If the min and max properties are changed, the tickmarks and labels must be updated also.", () => { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.