:in-range

:in-range is a CSS pseudo-class used to style elements that have range limitations when the value that the element bound to is within the specified range limits.

In other words, it matches an element when the value of its value attribute is within the range limitations specified on it.

Any other element that does not have data range limitations or that is not a form control element can not be selected with :in-range.

Examples of elements with range limitations are sliders and inputs that accept a number as a value. For example:

<input type="number">
                

Such an input would have a range of acceptable values specified using the min and max attributes. The value attribute would hold the current value of the input.

<input type="number" min="1" max="10" value="8">
                

In this example, as long as the value is between 1 and 10, the input will match the :in-range selector and can be styled. The following will style the input while its value is within the range limit:

input[type="number"]:in-range {
    /* styles here */
}
                

An element whose value is out of the specified range can be selected and styled using the :out-of-range pseudo-class selector.

Trivia & Notes

Just like other pseudo-class selectors, the :in-range selector can be chained with other selectors such as :hover, for example, to provide hover styles for the element when its value is in the allowed range limit. For example:

input:in-range:hover {
    cursor: help;
}