adobe / adobe/react-spectrum

Slider: ticks (marks) & snap to ticks

Open
#8,285 2 comments 0 reactions 0 assignees View on GitHub
enhancement
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.