Skip to content

feat(ui5-slider): support custom values via tickmarks property#13441

Open
MapTo0 wants to merge 2 commits intomainfrom
feat/slider-custom-values
Open

feat(ui5-slider): support custom values via tickmarks property#13441
MapTo0 wants to merge 2 commits intomainfrom
feat/slider-custom-values

Conversation

@MapTo0
Copy link
Copy Markdown
Contributor

@MapTo0 MapTo0 commented Apr 29, 2026

Summary

  • Adds a public tickmarks property to ui5-slider enabling custom non-numeric labels on tick marks
  • When tickmarks is set, the slider snaps only to defined values, displays custom labels, and announces them via aria-valuetext
  • Auto-derives min/max from tickmark values and auto-shows tickmarks — zero boilerplate for consumers

API

slider.tickmarks = [
  { value: 0, label: "Freezing" },
  { value: 25, label: "Room Temp" },
  { value: 50, label: "Warm" },
  { value: 100, label: "Boiling" }
];

Behavior in custom values mode

  • Handle snaps to nearest defined tickmark value on click/drag
  • Arrow keys navigate to next/previous tickmark value
  • Home/End jump to first/last value
  • Ctrl+Arrow/PageUp/PageDown jump by ~1/10th of tickmark count
  • Tooltip displays custom label
  • Editable tooltip is disabled (only defined values are valid)
  • aria-valuetext set for screen reader accessibility
  • step, min, max, showTickmarks are ignored when tickmarks is provided

Scope

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

  • 11 new Cypress tests covering: rendering, click snapping, keyboard navigation, Home/End, handle positioning, aria-valuetext, tooltip label, auto-derived min/max, auto-show tickmarks, backward compatibility
  • All 55 existing + new Slider tests pass
  • TypeScript compiles cleanly
  • Manual testing via test page at /test/pages/Slider.html (Custom Values section)

MapTo0 added 2 commits April 29, 2026 16:20
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
@ui5-webcomponents-bot
Copy link
Copy Markdown
Collaborator

@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview April 29, 2026 13:29 Inactive
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature Request]: Support Range Slider with Custom Values [Slider]: Support custom label for Slider component

2 participants