Is there invalid state of Input range?

I need to define custom HTML5 form validation styles in my application's design system like Bootstrap. But I don’t know how to apply :invalid state to an <input type="range">.

:invalid

<input type="range">

console.log($('#test').val());
$('#test').val(50);
console.log($('#test').val());

.valid-message,
.invalid-message
display: none;


.input:valid ~ .valid-message
display: block;
color: green;


.input:invalid ~ .invalid-message
display: block;
color: red;


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="control">
<input type="range" class="input range" id="test" min="1" max="20">
<p class="valid-message">This is valid</p>
<p class="invalid-message">This is invalid</p>
</div>

Is there invalid state of Input range? How can I reproduce that state?

value="50"

:out-of-range

type="number"

3 Answers
3

Range controls can be invalid only if setCustomValidity() is called.

setCustomValidity()

Refer to the specification; https://html.spec.whatwg.org/multipage/input.html#concept-input-value-default-range

It never be valueMissing state because it has default value.
It never be rangeUnderflow, rangeOverflow, stepMismatch because UA must adjust the value according to the specification.

valueMissing

rangeUnderflow

rangeOverflow

stepMismatch

document.getElementById("test").setCustomValidity("Error message")

But I did not know how to apply :invalid state to an <input type="range">.

:invalid

<input type="range">

Actually you can't apply :invalid state to an <input type="range">, because the value will always be set between the min and max values, and you can't force it to be out of range it will be automatically updated to fit the range.

:invalid

<input type="range">

min

max

range

If you check the MDN <input type="range"> specifications in the Value section, you can see that:

<input type="range">

If an attempt is made to set the value lower than the minimum, it is set to the minimum. Similarly, an attempt to set the value higher than the maximum results in it being set to the maximum.

By testing on Chrome and Firefox I reason that no :invalid state can occur for type="range". Any value out of range is automatically increased or decreased to min or max.

:invalid

type="range"

min

max

Mozilla sets the defaults to 0 and 100 and bad or no values are replaced by average value.

W3C about input range

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.