adobe / adobe/spectrum-web-components
[Feat]: Vertical Sliders
- 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:
### 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
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