feat(ui5-slider, ui5-range-slider): make tickmarks visual-only#13441
Open
feat(ui5-slider, ui5-range-slider): make tickmarks visual-only#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 |
Custom tickmarks now serve as visual labels at specific positions on the scale without affecting slider movement. The slider moves freely based on min/max/step regardless of tickmark positions. When the current value matches a tickmark value, its label is shown in the tooltip and announced via aria-valuetext. BREAKING CHANGE: The tickmarks property no longer causes the slider to snap exclusively to defined values. Users must set min/max/step explicitly alongside tickmarks.
MapTo0
changed the title
Interactive page with 6 open design questions for review: 1. Tooltip text for in-between values 2. Magnetic snap behavior 3. Keyboard Ctrl+Arrow jump targets 4. Minor ticks between labeled tickmarks 5. Label density/overflow handling 6. Range slider in-range label emphasis
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
2 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.
Summary
min/max/stepregardless of tickmark positions (no snapping)aria-valuetexttickmarksproperty toui5-range-slider(previously only onui5-slider)min/max/stepand snapped exclusively to tickmark valuesBREAKING CHANGE
The
tickmarksproperty no longer causes the slider to snap exclusively to defined values. Users must now setmin/max/stepexplicitly alongsidetickmarks.Test plan