adobe / adobe/react-spectrum

Discrete Slider

Open
#8,286 3 comments 2 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: [Discrete slider example in MUI](https://mui.com/material-ui/react-slider/#discrete-sliders)

https://github.com/user-attachments/assets/915f94b8-5277-4f21-81dd-93fd2ff0e56a

Might be related to #8285.

### 🤔 Expected Behavior?

Support discrete sliders; the steps can be distributed evenly or not. Arrow keys should move the slider to the previous/next tick.

There may be a different method for mapping ticks to values. For example, values might be string enums rather than numbers.

### 😯 Current Behavior

Currently, discrete sliders are not fully supported in React Spectrum/React Aria.

### 💁 Possible Solution

_No response_

### 🔦 Context

Use cases:
- Use a slider to select subscription plans (arranged by e.g. price; not a true slider)
- Use a slider to choose a number, however only a limited set of values are allowed (ticks are placed proportionally on the track)

### 💻 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.