Skip to content

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

Merged
merged 7 commits into from
Jul 1, 2025

Conversation

Shrinivassab
Copy link
Contributor

Description

Adds documentation showing how to use label attributes with <option> elements in range-type datalists. Includes:

  • Labeled value example in the "Range type" section
  • Note about browser tooltip behavior
  • Link to relevant HTML spec section

Motivation

Additional details

Browser behavior verified in:

  • Chrome 125: Shows labels as hover tooltips
  • Firefox 126: Shows labels as hover tooltips
  • Safari 17: Shows labels as hover tooltips

Spec reference:
https://html.spec.whatwg.org/multipage/input.html#range-state-(type=range)

Related issues and pull requests

Fixes #39953

@Shrinivassab Shrinivassab requested a review from a team as a code owner June 17, 2025 02:29
@Shrinivassab Shrinivassab requested review from chrisdavidmills and removed request for a team June 17, 2025 02:29
@github-actions github-actions bot added Content:HTML Hypertext Markup Language docs size/s [PR only] 6-50 LoC changed labels Jun 17, 2025
Copy link
Contributor

github-actions bot commented Jun 17, 2025

Preview URLs

External URLs (1)

URL: /en-US/docs/Web/HTML/Reference/Elements/datalist
Title: <datalist>: The HTML Data List element

(comment last updated: 2025-06-30 08:30:09)

Copy link
Contributor

@chrisdavidmills chrisdavidmills left a 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?

@Shrinivassab
Copy link
Contributor Author

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 label attribute is defined in the spec for use with range-type inputs and datalists, browser support is inconsistent and the labels may not be displayed visually.

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.

@Shrinivassab
Copy link
Contributor Author

Hi @chrisdavidmills:
Just wanted to follow up on this PR when you have a moment. I have incorporated your feedback and updated the note.
I know you are likely busy, but I would really appreciate your review whenever time allows. Thanks again for your thoughtful input earlier.

Copy link
Contributor

@chrisdavidmills chrisdavidmills left a 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?

@Shrinivassab
Copy link
Contributor Author

Shrinivassab commented Jun 30, 2025

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.

@chrisdavidmills
Copy link
Contributor

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.

@chrisdavidmills chrisdavidmills merged commit 2307bdb into mdn:main Jul 1, 2025
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Content:HTML Hypertext Markup Language docs size/s [PR only] 6-50 LoC changed
Projects
None yet
Development

Successfully merging this pull request may close these issues.

HTML datalist page doesn't mention labeled values for range inputs
2 participants