Obsolete
Status Update
No update yet.
Comments
tk...@chromium.org
> http://www.w3.org/TR/html-markup/input.range.html
This is not a specification. You need to refer to:
http://www.w3.org/TR/html5/forms.html#range-state-(type=range)
Empty value is sanitized to the middle value.
> The value sanitization algorithm is as follows: If the value of the element is not a valid floating-point number, then set it to a valid floating-point number that represents the default value.
> The default value is the minimum plus half the difference between the minimum and the maximum, unless the maximum is less than the minimum, in which case the default value is the minimum.
"required" is not supported.
> The following content attributes must not be specified and do not apply to the element: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, maxlength, multiple, pattern, placeholder, readonly, required, size, src, and width.
In summary input[type=range] can't be invalid.
This is not a specification. You need to refer to:
Empty value is sanitized to the middle value.
> The value sanitization algorithm is as follows: If the value of the element is not a valid floating-point number, then set it to a valid floating-point number that represents the default value.
> The default value is the minimum plus half the difference between the minimum and the maximum, unless the maximum is less than the minimum, in which case the default value is the minimum.
"required" is not supported.
> The following content attributes must not be specified and do not apply to the element: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, maxlength, multiple, pattern, placeholder, readonly, required, size, src, and width.
In summary input[type=range] can't be invalid.
bl...@gmail.com
Got it. Thanks Kent for the detailed explanation.
Can you respond to the last part, about the issue in dev tools with these styles for example in that fiddle:
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
background:blue;
}
not showing up in the elements panel, with shadow dom turned on)? The styling works correctly, it just isn't inspectable or modifiable in the elements panel.
Can you respond to the last part, about the issue in dev tools with these styles for example in that fiddle:
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
background:blue;
}
not showing up in the elements panel, with shadow dom turned on)? The styling works correctly, it just isn't inspectable or modifiable in the elements panel.
tk...@chromium.org
Re: #2
It's unrelated to this issue. However, my 30.0.1552.0 canary shows that rule.
It's unrelated to this issue. However, my 30.0.1552.0 canary shows that rule.
is...@google.com
This issue was migrated from crbug.com/chromium/256345?no_tracker_redirect=1
[Monorail components added to Component Tags custom field.]
[Monorail components added to Component Tags custom field.]
Description
Example URL:
Steps to reproduce the problem:
1. Swing the input range slider and watch the numeric input update. Type numbers in the numeric input and watch the slider update. Great, angular is working...
2. Put the cursor in the numeric input and press delete to set the input to an empty string. Or type some letters, either way.
What is the expected behavior?
Both "invalid" inputs should get the dashed red outline.
What went wrong?
Only the input of type="number" is getting the dashed red outline.
Does it occur on multiple sites: Yes
Is it a problem with a plugin? No
Did this work before? No
Does this work in other browsers? No
Chrome version: 30.0.1550.2 Channel: n/a
OS Version: OS X 10.8.4
Flash Version: Shockwave Flash 11.8 r800
Range inputs visually default to a middle value even when their value is unsupplied, or an empty string. So it looks like they have a middle value when they have no value at all. This can create visual confusion for forms using data-binding.
The spec says that an <input type="range"> has the value of "a string representing a number":
But what if that string is the empty string, and the input is "required"?
Authors should be able to hide, fade back, or highlight an entire range slider when the input is invalid (the empty string is of course just one example of invalid input). This would allow authors to simply hide the thumb-slider when the input is wonky, as I tried to in the fiddle. That's the overarching goal for this particular use case.
A possible concern with this might be that range inputs with no explicit initial values would then come up as initially invalid, until the user moves the slider. I don't see that as a problem, because authors should generally be stating initial values for range inputs that are "required".
As a separate but closely related issue, if you turn on shadow DOM and inspect the slider-thumb, my css overrides in this fiddle aren't appearing in the Elements Panel under "Matched CSS Rules", where they probably should be. (I can file a separate issue for that if necessary.)
Thanks!