Should we standardize the anatomy of `<input type=range>`?
Nobody has claimed this yet.
- Dominant language
- MDX
- Stars
- 4.5k
- Forks
- 226
- Avg merge
- 2d 22h
- Merged PRs (30d)
- 4
Description
First, I'm a bit unclear on Open-UI vs. WhatWG HTML for this. This issue is about standardizing the pseudo element parts of the Web Platform <input type=range>. Does this belong here? Or in WHATWG? I do see that there is a research page for "slider" which is the Open UI concept implemented by <input type=range>.
Problem
- No healthy way to style the filled/progress amount of the slider
- CSS only solutions are bound to the size of the track based on the only cross browser solution possible
- example from native-ui (about as beautiful as they get)
- example: since this design called for the thumb to be larger than the track, CSS only can't show the "filled" amount
- current prefixed selectors stomp each other, so developers are forced to duplicate styles
- Josh Comeau sharing their learnings about this oddity: tweet
- Javascript solution runs on page load and watches for user input to update a custom property
- Firefox has
::-moz-range-progress - we've recently added support for
accent-colorwhich will tint this fill range state, but still can't target it with a selector and give it a gradient background
- CSS only solutions are bound to the size of the track based on the only cross browser solution possible
- Partial support of ticks and labels
- [vertical] completely unsupported with ticks
- vertical tucked behind a prefix
-webkit-appearance: slider-vertical;why?
- vertical tucked behind a prefix
- labels missing
- missing selectors for styling ticks / labels
- [vertical] completely unsupported with ticks
Tasks:
- Separate
trackfromprogressand enable::-webkit-slider-progress-trackas a style target for CSS - Complete current ticks implementation to work with vertical
- unprefix the selectors
- support attribute
- Add labels to our slider implementation
- Help spec a way to style the labels and ticks
Resources
- Range ticks/hashes/labels: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#A_range_control_with_hash_marks
- HTML 5.1 spec: https://www.w3.org/TR/html51/sec-forms.html#range-state-typerange
--> Full credit due here to @argyleink
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the Open UI slider research page and the linked MDN and HTML specification resources, while resolving whether the work belongs in Open UI or WHATWG. Define the scope for progress styling, vertical ticks, and labels; done would require a settled specification direction for the requested pseudo-elements and attributes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, html
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 20/100