Skip to content

input[type="range"] pseudo selector for current value (akin to aria-valuenow) #6354

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

Open
michaelcpuckett opened this issue Jun 6, 2021 · 4 comments
Labels

Comments

@michaelcpuckett
Copy link

I would like to be able to use a native <input type="range"> (which comes with arrow keyboard support) and style it (or its siblings, etc) based on its current value.

If I create a comparable ARIA slider widget with JavaScript, I can style it based on the [aria-valuenow] attribute. I think the same feature should exist for the native element to enable more native interactivity for non-JS users.

@Loirooriol
Copy link
Contributor

This would probably need numerical comparisons in order to really be useful. #5890 covers that for attribute selectors.

@yisibl
Copy link
Contributor

yisibl commented Jan 6, 2024

So you want to get the value of the current input via CSS?

For example, env(input-current-value)

@michaelcpuckett
Copy link
Author

No, I just want the current value rendered into the range input's HTML or available as a CSS pseudo selector on it so it can be styled based on the value.

@xiaochengh
Copy link
Contributor

So you want to get the value of the current input via CSS?

For example, env(input-current-value)

That sounds like the advanced attr() function, though no browser supports it yet

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

5 participants