-
Notifications
You must be signed in to change notification settings - Fork 22.8k
docs(datalist): Document labeled values for range inputs #39960
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
Preview URLs External URLs (1)URL:
(comment last updated: 2025-06-30 08:30:09) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi @Shrinivassab, and thank you for your work on this PR.
Before I review it properly, I've got a comment to start with — from what I've read in the spec, it looks like including label attributes on the <option>
elements is supposed to make those labels appear below the tickmarks, rather than as tooltips like you say.
I tested both your modified example and the example in the spec on the newest Firefox, Chrome, and Safari, and ... it didn't seem to work in any of them, as a tooltip or a visible label. I tested it on Windows and macOS. Did you definitely see this working?
Thanks for the review, @chrisdavidmills , great point. I did initially observe tooltips in a custom testing setup (possibly browser developer tools injected the label values), but you are right, in normal user-facing behavior, labels don't consistently appear as tooltips or visually below tick marks. I have now updated the note section to clarify that while the To help developers communicate value meaning to users, we could suggest a manual legend below the slider, like this: <div style="font-size: 0.9em; margin-top: 0.5em;">
<strong>Legend:</strong> 0% | Minimum Tip | Standard | Generous | Very Generous
</div> Appreciate the feedback, I will push the update shortly. |
Hi @chrisdavidmills: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks, @Shrinivassab. I took this opportunity to do a bit of text cleanup and format the note properly.
I've approved the PR; can you have a look and make sure you are OK with my wording update before we merge it?
Thanks @chrisdavidmills for the cleanup and your edits definitely sharpened the message. I just reviewed the changes and everything looks good to me. I am not seeing a merge options from my end. I think it's good to merge. |
Cool, glad you like it! Let's get this merged (you need to have elevated privileges to see that option). Thanks again for your work on this. |
Description
Adds documentation showing how to use
label
attributes with<option>
elements in range-type datalists. Includes:Motivation
Additional details
Browser behavior verified in:
Spec reference:
https://html.spec.whatwg.org/multipage/input.html#range-state-(type=range)
Related issues and pull requests
Fixes #39953