:in-range クラス

　:in-range クラスは、minとmax属性の値が範囲内なら、設定されたスタイルを反映する擬似クラスです。関係する<label>も、"+label"セレクターでスタイルを設定することができます。

:in-range

input:in-range{
	outline: 2px green solid;
}

input:in-range + label{
	background-color: #01DF0177;
}

詳しくは Example を参照してください

　対になる疑似クラスに :out-of-range クラスがあります。:out-of-range クラスはminとmax属性の値の範囲外ならスタイルを反映します。

構文(Syntax)

HTMLElement:in-range {
	style_propaty: value;
	...
}

　疑似クラスはDOM ( JavaScript )から操作できません。

　スタイルのみの操作は擬似クラスを利用したほうが簡易です。

　:in-rangeの例です。:out-of-rangeクラスも使っています。範囲外になるとアラートが出ます。