Slider: ticks (marks) & snap to ticks
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### Provide a general summary of the feature here
Example: "Alert volume" slider in macOS Settings.
https://github.com/user-attachments/assets/55470628-2a65-48a6-8493-7f2e07285e8e
### 🤔 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_
Contributor guide
Assessment
This issue has not been assessed yet.