xz / xz/new.css
Padding issues for <input type="range"
Open
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 4.1k
- Forks
- 127
- PR merge metrics
- No merged PRs in 30d
Description
By default, all input elements have a 12px left-right padding:
textarea,
select,
input {
padding: 6px 12px;
...
}
For an <input type="range" ... this causes an issue (at least in Chrome 83) with incorrectly rendering the input:
Min value:

Mid value:

Max value:

Without the left-right padding, the input is rendered correctly.
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 by locating the shared CSS rule shown in the issue and inspect how it applies to input type="range" controls. Reproduce the problem in Chrome 83 at the minimum, middle, and maximum values, then verify that the range renders correctly without left-right padding.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100