adobe / adobe/spectrum-web-components

[Feat]: Vertical Sliders

Open
#5,514 0 comments 0 reactions 0 assignees View on GitHub
Component:Slider Feature needs-jira-ticket
Dominant language
TypeScript
Stars
1.5k
Forks
262
Avg merge
3d 10h
Merged PRs (30d)
68

Description

### Code of conduct

- [x] I agree to follow this project's code of conduct.

### Impacted component(s)

Slider

### Description of the requested feature

I was looking for a vertical slider to use as a volume control. I'd imagine this can also be used for other use cases that are typically thought of by users in a vertical scale (e.g. temperature).

### Mockups or screenshots

My current specific use case would be for a simple variant of volume fader, like:
Image

### Implementation notes or ideas

There seems to be some support for vertical sliders in native HTML/CSS, though it's implied some are non-standard.
- **[Input range on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/range)** - notes most contemporary use of of `writing-mode: vertical-lr` to achieve this effect with the default input range slider. Also notes `orient`, and `appearance` for support in older browsers.
- **[Creating vertical controls on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_writing_modes/Vertical_controls)** - notes the supplemental use of `direction` to change direction of control content.

### Would you like to track this issue in Jira?

- [ ] Yes, please tell me the ticket number!

Contributor guide

Open the contributing guide

Research direction

Start with the project's Slider component and review the linked MDN guidance on vertical range controls, writing-mode, direction, orient, and appearance. Done means the Slider supports a vertical volume-control use case with behavior and presentation consistent with the requested mockup.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html, typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.