Slider: ticks (marks) & snap to ticks

[lixiaoyan]

Provide a general summary of the feature here

Example: "Alert volume" slider in macOS Settings.

Screen.Recording.2025-05-22.at.4.36.43.PM.mov

🤔 Expected Behavior?

• Allow to add multiple ticks (marks) to the slider
• May have optional labels above/below the track
• Clicking on the label should move the slider to the corresponding value
• Snap to ticks based on cursor movement (the behavior may vary depending on movement speed)
• Keyboard actions (e.g. arrow keys) should remain unaffected

😯 Current Behavior

Currently, React Spectrum and React Aria do not have such features.

💁 Possible Solution

No response

🔦 Context

Use cases:

• Price slider, includes some ticks for commonly used values
• Volume balance slider, snap to 0
• Brightness slider in image editing app, snap to 0

💻 Examples

No response

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[reidbarber]

Seems like this is different from just using steps since you can still set the value between steps. I think this is a pretty advanced use case that may be better suited to have implemented by using a controlled value.