feat(ui5-slider): support custom values via tickmarks property#13441
Open
feat(ui5-slider): support custom values via tickmarks property#13441
Conversation
Allow developers to define custom non-numeric labels on slider tick marks
by setting the `tickmarks` property with an array of {value, label} objects.
When set, the slider enters "custom values" mode:
- Handle snaps only to defined tickmark values
- Custom labels are displayed on the scale
- Tooltip shows the custom label instead of numeric value
- aria-valuetext announces the custom label for accessibility
- min/max are auto-derived from tickmark values
- Tickmarks auto-show without requiring show-tickmarks attribute
- step property is ignored (navigation moves between defined values)
- Editable tooltip is disabled (only defined values are valid)
Resolves #9730, resolves #9058
Collaborator
|
🚀 Deployed on https://pr-13441--ui5-webcomponents-preview.netlify.app |
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
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.
Summary
tickmarksproperty toui5-sliderenabling custom non-numeric labels on tick markstickmarksis set, the slider snaps only to defined values, displays custom labels, and announces them viaaria-valuetextmin/maxfrom tickmark values and auto-shows tickmarks — zero boilerplate for consumersAPI
Behavior in custom values mode
aria-valuetextset for screen reader accessibilitystep,min,max,showTickmarksare ignored whentickmarksis providedScope
This is the POC implementation for Slider only. Range Slider support will follow in Phase 2 after it is refactored to use
SliderScale.Resolves #9730, resolves #9058
Related: BGSOFUIRILA-4125
Test plan
/test/pages/Slider.html(Custom Values section)